跨域的知識總結
表現
XMLHttpRequest、Fetch API等限制了不同域之間的數據調用活鹰。
原因
跨域的直接原因是瀏覽器的同源策略限制哈恰，根本原因還是基于安全的考慮。
??跨域本身就是瀏覽器端進行的限制志群，我們設置可以通過更改瀏覽器的設置來關閉跨域限制着绷，但是不推薦關閉
常見解決方法及優(yōu)缺點
JSONP
jsonp的本質是通過不受同源策略限制的script標簽加載數據（其實是js代碼），用在頁面中實現定義好一個處理函數處理數據锌云，它用這樣的方式繞過了同源策略荠医。
<script src="http://xxx//xxx.js?callback=callback"></script>
// js文件中的內容
callback({"name":"我是數據"});
function callback (data) {
// 拿到數據
var name = data.name;
}
優(yōu)點：
簡單
缺點：
需要接口支持才行
只支持get方式
因為url長度限制，所以jsonp也不能傳輸太多數據
不能設置請求頭宾抓，畢竟是借助script標簽請求數據子漩，沒辦法隨意的設置請求頭
CORS
跨域資源共享
可以參考：
// 設置允許跨域的域名
header('Access-Control-Allow-Origin', 'xxx');
// 是否允許帶上認證信息（httpAuth，cookie）
header('Access-Control-Allow-Credentials', true);
// 設置允許帶上的響應頭
header('Access-Control-Expose-Headers', 'xxx');
// 設置允許帶上的請求頭
header('Access-Control-Request-Headers', 'xxx');
// 設置允許的請求方法
header('Access-Control-Request-Method', 'GET,POST,PUT,DELETE,OPTIONS');
var xhr = new XMLHttpRequest();
// 我要帶上認證信息
xhr.withCredentials = true;
非簡單請求會事先發(fā)送一個OPTIONS請求確認是否允許跨域
優(yōu)點：
- 支持所有請求方式
- 支持設置請求頭
缺點：
- 需要服務端在響應頭中添加字段
- 對請求頭和相應頭都有限制
- 存在兼容性的問題
- 限制了httpAuth石洗、cookie幢泼，需要配置xhr對象和響應頭
使用輔助手段代理成同域
使用nginx反向代理不同域的接口，轉換成同域的接口讲衫。
如果不使用反向代理缕棵，也可以直接后端寫代碼去請求接口后返回給前端孵班，原理和反向代理相同。
優(yōu)點：
請求同域招驴，想怎么玩就怎么玩篙程。
缺點：
需要維護代理
