跨域:
當前頁面中的某個介面，請求的地址和當前頁面的地址中，協議、域名、埠號有一項不同就是發生了跨域請求
原因:
遊覽器為了保護網頁的安全，同源協議策略，如果缺少了同源策略，遊覽器很容易受到XSS、CSRF等攻擊
跨域報錯如下:
跨域解決方案:
- JSONP（a、img）
使用script標籤，利用其可以跨域請求資源，將回撥函式作為引數拼接到url上。
後端收到請求後，呼叫該回撥函式，並將資料作為引數返回
響應頭返回文件型別應設為javascript
缺點是隻支援GET請求，安全性差可能會遭受XSS攻擊
JSONP和ajax都是向伺服器端傳送請求，但Ajax屬於同源策略，JSONP屬於非同源策略
- CORS
通過後端設定允許跨域實現
response.setHeader('Access-Control-Allow-Origin','*')；
response.setHeader('Access-Control-Allow-Origin','GET, PUT, OPTIONS, POST')
- node中介軟體，nginx反向代理
跨域限制時，遊覽器不能跨域訪問伺服器，node中介軟體，nginx反向代理，都是讓請求發給代理伺服器，靜態頁面和代理伺服器是同源的，代理伺服器再向後端伺服器傳送請求，同源限制對伺服器不加限制
(中介軟體就是一種功能的封裝方式，就是封裝在程式中處理http請求的功能、Nginx (engine x) 是一個高效能的HTTP和反向代理web伺服器)
-
- 代理伺服器接受客戶端請求，轉發請求給後端伺服器
- 代理伺服器接收來自後端的響應，轉發給客戶端
- postMessage
H5新增API，通過傳送和接收API實現跨域通訊，可用於解決：
頁面和其開啟的新視窗的資料傳遞
多視窗之間的資訊傳遞
頁面與巢狀的iframe訊息傳遞
如上三個場景的跨域資料傳遞
- webSocket
websocket是HTML5的一個持久化協議，實現了遊覽器和伺服器之間的全雙工通行信，也是解決跨域請求的一種方案
websocket和HTTP都是應用層協議，都基於TCP協議
webscoket是一種雙向通訊協議，在建立連線（此時需要藉助HTTP協議之後就與HTTP無關了）後
webscoket的客戶端和伺服器端都能主動向對方傳送或接受資料
- window.name + iframe
- location.hash + iframe
- document.domain +iframe
跨域場景:
前後端分離開發，請求第三方介面
同源策略:
- 定義
當兩個url的協議、域名、埠號相同時這兩個url就是同源的，同源的兩個url間可以進行相互資源訪問和操作DOM
不同源的url之間進行資源訪問就會受到遊覽器的安全策略限制，這就是同源策略
- 體現
DOM：同源策略限制不同源站點之間JavaScript指令碼對當前DOM物件的讀寫操作
Web資料：同源策略限制不同源站點訪問當前站點的cookie、sessionStorage、localStorage
網路：同源策略限制通過XMLHTTPRequest等方式將當前站點的內容傳送至不同源站點
總結:
- CORS支援所有型別的HTTP請求，是跨域請求的根本解決方案
- JSONP只支援GET請求，優勢在於支援老式遊覽器和不支援CORS的網站請求資料
- Node中介軟體和nginx，都主要通過同源策略對遊覽器不加限制的原理
參考: