JS跨域請求

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

跨域解決方案

• CORS方案

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。CORS需要瀏覽器和伺服器同時支援。目前，所有瀏覽器都支援該功能，IE瀏覽器不能低於IE10。

它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。整個CORS通訊過程，都是瀏覽器自動完成，不需要使用者參與。

CORS通訊與同源的AJAX通訊程式碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動新增一些附加的頭資訊，有時還會多出一次附加的請求，但使用者不會有感覺。

因此，實現CORS通訊的關鍵是伺服器。只要伺服器實現了CORS介面，就可以跨源通訊。

請求過程如下圖:

Preflight Request：

然後伺服器端給我們返回一個Preflight Response:

• Access-Control-Allow-Origin
  Access-Control-Allow-Origin是HTML5中定義的一種解決資源跨域的策略。

他是通過伺服器端返回帶有Access-Control-Allow-Origin標識的Response header，用來解決資源的跨域許可權問題。

使用方法:在response新增Access-Control-Allow-Origin，

例如Access-Control-Allow-Origin:www.google.com

也可以設定為 * 表示該資源誰都可以用

CORS請求預設不傳送Cookie和HTTP認證資訊。

如果要把Cookie發到伺服器，一方面要伺服器同意，指定Access-Control-Allow-Credentials欄位。

另一方面，開發者必須在AJAX請求中開啟withCredentials屬性。否則，即使伺服器同意傳送Cookie，瀏覽器也不會發送。或者，伺服器要求設定Cookie，瀏覽器也不會處理。

使用方法

• 1.先在需要跨域的工程接受請求

response.setHeader("Access-Control-Allow-Origin", "http://localhost:9106");
response.setHeader("Access-Control-Allow-Credentials", "true");

• 如果想要把Cookie發到伺服器，需要在AJAX請求中開啟開withCredentials屬性。

• springMVC的版本在4.2或以上版本，可以使用註解實現跨域, 在跨域的方法上添加註解@CrossOrigin即可

@CrossOrigin(origins="http://localhost:9106",allowCredentials="true")

allowCredentials="true"  可以預設

瞭解更多跨域解決方案

可以參考如下地址，講解了很多方法。

瞭解更多