JS跨域請求的解決方案

這裡說的 js 跨域是指通過 js 在不同的域之間進行資料傳輸或通訊，比如用 ajax 向乙個不同的域請求資料，或者通過 js 獲取頁面中不同域的框架中(iframe)的資料。只要協議、網域名稱、埠有任何乙個不同，都被當作是不同的域。

修改 ***-page-web 的 itemcontroller.js ，引入$http 服務，修改 addtocart 方法

//新增商品到購物車
$scope.addtocart=function()else
});}

測試後發現無法跨域呼叫xmlhttprequest cannot loadhttp://localhost:9107/cart/addgoodstocartlist.do?itemid=112344&num=1.no 'access-control-allow-origin' header is present on the requested resource. origin'http://localhost:9100' is therefore not allowed access. the response had http status code 400.

cors 是乙個 w3c 標準，全稱是"跨域資源共享"（cross-origin resource sharing）。cors需要瀏覽器和伺服器同時支援。目前，所有瀏覽器都支援該功能，ie 瀏覽器不能低於 ie10。它允許瀏覽器向跨源伺服器，發出 xmlhttprequest 請求，從而克服了 ajax 只能同源使用的限制。整個 cors 通訊過程，都是瀏覽器自動完成，不需要使用者參與。對於開發者來說，cors 通訊與同源的 ajax 通訊沒有差別，**完全一樣。瀏覽器一旦發現 ajax 請求跨源，就會自動新增一些附加的頭資訊，有時還會多出一次附加的請求，但使用者不會有感覺。因此，實現 cors 通訊的關鍵是伺服器。只要伺服器實現了 cors 介面，就可以跨源通訊。

public result addgoodstocartlist(long itemid,integer num)access-control-allow-originaccess-control-allow-origin 是 html5 中定義的一種解決資源跨域的策略。他是通過伺服器端返回帶有 access-control-allow-origin 標識的 response header，用來解決資源的跨域許可權問題。使用方法，在 response 新增 access-control-allow-origin，例如access-control-allow-origin:www.google.com也可以設定為 * 表示該資源誰都可以用

（2）修改 pinyougou-item-web 的 itemcontroller.js

//新增商品到購物車
$scope.addtocart=function()).success(
function(response));
}

呼叫測試，可以實現跨域了。cors 請求預設不傳送 cookie 和 http 認證資訊。如果要把 cookie 發到伺服器，一方面要伺服器同意，指定 access-control-allow-credentials 字段。另一方面，開發者必須在 ajax 請求中開啟 withcredentials 屬性。否則，即使伺服器同意傳送 cookie，瀏覽器也不會傳送。或者，伺服器要求設定 cookie，瀏覽器也不會處理。

springmvc 的版本在 4.2 或以上版本，可以使用註解實現跨域, 我們只需要在需要跨域的方法上新增註解@crossorigin 即可

@crossorigin(origins="http://localhost:9105",allowcredentials="true")

allowcredentials="true" 可以預設

JS跨域請求的解決方案

JS跨域請求解決方案

跨域請求解決方案

跨域請求解決方案

JS跨域請求的解決方案

JS跨域請求解決方案

跨域請求解決方案

跨域請求解決方案

相關推薦