## 1. 什么是跨域 1. 跨域，是指瀏覽器不能執行其它網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript實施的安全限制。 2. 簡單來講，就是從地址A加載的頁面，不能訪問地址B的服務。此時地址A與地址B不同源。 3. 所謂同源，就是**域名、協議、端口**均相同 ~~~ http://www.123.com/index.html 調用 http://www.123.com/abc.do （非跨域） http://www.123.com/index.html 調用 http://www.456.com/abc.do （主域名不同:123/456，跨域） http://abc.123.com/index.html 調用 http://def.123.com/server.do （子域名不同:abc/def，跨域） http://www.123.com:8080/index.html 調用 http://www.123.com:8081/server.do（端口不同:8080/8081，跨域） http://www.123.com/index.html 調用 https://www.123.com/server.do （協議不同:http/https，跨域） ~~~ ## **2. 解決跨域** ### **2.1 CORS** > 隨著互聯網的發展，同源策略嚴重影響了項目之間的連接，尤其是大項目，需要多個域名配合完成，因此W3C推出了CORS，即Cross-origin resource sharing（跨來源資源共享）。 > **CORS的基本思想就是使用額外的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定是否接受跨域請求。** **1. cors需要瀏覽器和服務器同事支持** **2. 目前所有瀏覽器都支持cors，瀏覽器在跨域訪問時，會自動添加HTTP頭信息，或者發起預檢請求，用戶對此毫無感知** **3. 因此是否支持跨域請求，關鍵在于服務器是否做了CORS配置，允許跨域訪問。** #### **2.1.1 cors處理簡單請求** 同時滿足以下兩大條件的，就屬于簡單請求： * 請求方法是以下3種之一：GET、POST、HEAD * HTTP頭信息不超出以下字段：AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type：僅限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain 凡是不滿足以上條件的，就屬于非簡單請求。如我們常用的json格式請求，由于其Content-Type的值為application/json，因此屬于非簡單請求。 對于這兩種請求，瀏覽器的處理方式是不一樣的。