麪筋系列-http-同源策略和跨域處理

什麼是同源策略

• 協議(http/https),端口(80/8080),域名(baidu/google)要相同才行
• document.domain

JSONP

jsonp-script標籤的src屬性不受同源策略限制，用此方式對非同源服務器請求資源，返回的JS代碼會調用指定的函數，攜帶的參數就是所需的數據，這樣就完成了跨域請求。

• JSONP(JSON with Padding（填充）)是JSON的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。 一、jsonp沒有使用XMLHttpRequest對象。 二、jsonp只是在一種跨域的技巧。 三、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的具體流程（瞭解）

1. 瀏覽器發送跨域請求
2. 服務器端收到一個跨域請求後，在響應頭中添加Access-Control-Allow-Origin Header資源權限配置。發送響應
3. 瀏覽器收到響應後，查看是否設置了header('Access-Control-Allow-Origin:請求源域名或者*');
4. 若是當前域已經獲得受權，則將結果返回給JavaScript。不然瀏覽器忽略這次響應。 結論：
5. 跨域行爲是瀏覽器行爲，響應是回來了的, 只是瀏覽器安全機制作了限制, 對於跨域響應內容進行了忽略。
6. 服務器與服務器之間是不存在跨域的問題的

》 服務器處理跨域：在先後端分離的項目中能夠藉助服務器實現跨域，具體作法是：前端向本地服務器發送請求，本地服務器代替前端再向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.上面三個問題的跨域數據傳遞
複製代碼

參考

• www.cnblogs.com/why210/p/95…

外鏈

• 2020春季中高級前端面試記 | 漸進加強題目甄選(上篇)
• 麪筋系列-http-同源策略和跨域處理
• 麪筋系列-http-前端緩存
• 麪筋系列-javascript-ES6基礎
• 麪筋系列-javascript-手寫題和基礎
• 麪筋系列-react-setSate同步異步問題