什麼是同源策略
- 協議(http/https),埠(80/8080),域名(baidu/google)要相同才行
- document.domain
JSONP
jsonp-script標籤的src屬性不受同源策略限制，用此方式對非同源伺服器請求資源，返回的JS程式碼會呼叫指定的函式，攜帶的引數就是所需的資料，這樣就完成了跨域請求。
- JSONP(JSON with Padding（填充）)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料訪問的問題。 1、jsonp沒有使用XMLHttpRequest物件。 2、jsonp只是在一種跨域的技巧。 3、jsonp只支援Get方式
let scriptDom = document.createElement("script");
scriptDom.src="請求地址?callback=函式名";
document.body.appendChild(scriptDom);
複製程式碼CORS
CORS -Cross-Origin Resource
Sharing(跨域資源共享)是一種允許當前域（origin）的資源（比如html/js/web service）被其他域（origin）的指令碼請求訪問的機制。當使用XMLHttpRequest傳送請求時，瀏覽器如果發現違反了同源策略就會自動加上一個請求頭:origin,後端在接受到請求後確定響應後會在Response Headers中加入一個屬性:Access-Control-Allow-Origin,值就是發起請求的源地
CORS的具體流程（瞭解）
- 瀏覽器傳送跨域請求
- 伺服器端收到一個跨域請求後，在響應頭中新增Access-Control-Allow-Origin Header資源許可權配置。傳送響應
- 瀏覽器收到響應後，檢視是否設定了header('Access-Control-Allow-Origin:請求源域名或者*');
- 如果當前域已經得到授權，則將結果返回給JavaScript。否則瀏覽器忽略此次響應。 結論：
- 跨域行為是瀏覽器行為，響應是回來了的, 只是瀏覽器安全機制做了限制, 對於跨域響應內容進行了忽略。
- 伺服器與伺服器之間是不存在跨域的問題的
》 伺服器處理跨域：在前後端分離的專案中可以藉助伺服器實現跨域，具體做法是：前端向本地伺服器傳送請求，本地伺服器代替前端再向api伺服器介面傳送請求進行伺服器間通訊，本地伺服器其實就是個中轉站的角色，再將響應的資料返回給前端
jsonp與cors的對比
- jsonp相容性好，老版本瀏覽器也支援，但是jsonp僅支援get請求，傳送的資料量有限。使用麻煩
- cors需要瀏覽器支援cors功能才行。但是使用簡單，只要服務端設定允許跨域，對於客戶端來說，跟普通的get、post請求並沒有什麼區別。
- 跨域的安全性問題：因為跨域是需要服務端配合控制的 ，也就是說不論jsonp還是cors，如果沒有服務端的允許，瀏覽器是沒法做到跨域的。
使用Nginx
-
方便的跨域方案Nginx nginx是一款極其強大的web伺服器，其優點就是輕量級、啟動快、高併發。
-
現在的新專案中nginx幾乎是首選，我們用node或者java開發的服務通常都需要經過nginx的反向代理。
反向代理的原理很簡單，即所有客戶端的請求都必須先經過nginx的處理，nginx作為代理伺服器再講請求轉發給node或者java服務，這樣就規避了同源策略。
還有哪些跨域的情況會遇到？
- iframe
PostMessage（iframe 相關的）
html5 提供的 PostMessage(data:需要傳遞的資料,origin: 協議+主機+埠號【+URL】)
1.頁面和其開啟的新視窗的資料傳遞
2.多視窗之間訊息傳遞
3.頁面與巢狀的iframe訊息傳遞
4.上面三個問題的跨域資料傳遞
複製程式碼