前端跨域的整理

Warren 發(fā)布于2019-06-21 16:29 / 3158人閱讀

摘要：跨域整理跨域資源共享對于開發(fā)來講，由于瀏覽器的同源策略，我們需要經(jīng)常使用一些的方法去跨域獲取資源，但是的方法總歸是。這樣就能根據(jù)之前寫好的回調(diào)函數(shù)處理這些數(shù)據(jù)了。

跨域整理 1. 跨域資源共享 CORS

對于web開發(fā)來講，由于瀏覽器的同源策略，我們需要經(jīng)常使用一些hack的方法去跨域獲取資源，但是hack的方法總歸是hack。直到W3C出了一個標準－CORS－"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
首先來說 CORS 需要瀏覽器和服務(wù)端同時支持的，對于兼容性來說主要是ie10+，其它現(xiàn)代瀏覽器都是支持的。
http://caniuse.com/#feat=cors

使用 CORS 跨域的時候其實和普通的 ajax 過程是一樣的，只是瀏覽器在發(fā)現(xiàn)這是一個跨域請求的時候會自動幫我們處理一些事，比如驗證等等，所以說只要服務(wù)端提供支持，前端是不需要做額外的事情的。

兩種請求

CORS 的請求分兩種，這也是瀏覽器為了安全做的一些處理，不同情況下瀏覽器執(zhí)行的操作也是不一樣的，主要分為兩種請求，當(dāng)然這一切我們是不需要做額外處理的，瀏覽器會自動處理的。

1. 簡單請求（simple request）

只要同時滿足以下兩大條件，就屬于簡單請求。

條件

1) 請求方法是以下三種方法中的一個：
HEAD
GET
POST
2）HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

過程

對于簡單的跨域請求，瀏覽器會自動在請求的頭信息加上 Origin 字段，表示本次請求來自哪個源（協(xié)議 + 域名 + 端口），服務(wù)端會獲取到這個值，然后判斷是否同意這次請求并返回。

// 請求
GET /cors HTTP/1.1
Origin: http://api.qiutc.me
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

1.服務(wù)端允許

如果服務(wù)端許可本次請求，就會在返回的頭信息多出幾個字段：

// 返回
Access-Control-Allow-Origin: http://api.qiutc.me
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: Info
Content-Type: text/html; charset=utf-8

這三個帶有 Access-Control 開頭的字段分別表示：

Access-Control-Allow-Origin
必須。它的值是請求時Origin字段的值或者 *，表示接受任意域名的請求。

Access-Control-Allow-Credentials；
可選。它的值是一個布爾值，表示是否允許發(fā)送Cookie。默認情況下，Cookie不包括在CORS請求之中。設(shè)為true，即表示服務(wù)器明確許可，Cookie可以包含在請求中，一起發(fā)給服務(wù)器。

再需要發(fā)送cookie的時候還需要注意要在AJAX請求中打開withCredentials屬性：var xhr = new XMLHttpRequest(); xhr.withCredentials = true;
需要注意的是，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為*，必須指定明確的、與請求網(wǎng)頁一致的域名。同時，Cookie依然遵循同源政策，只有用服務(wù)器域名設(shè)置的Cookie才會上傳，其他域名的Cookie并不會上傳，且原網(wǎng)頁代碼中的document.cookie也無法讀取服務(wù)器域名下的Cookie。

Access-Control-Expose-Headers
可選。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader("Info")可以返回Info字段的值。

2.服務(wù)端拒絕

當(dāng)然我們?yōu)榱朔乐菇涌诒粊y調(diào)用，需要限制源，對于不允許的源，服務(wù)端還是會返回一個正常的HTTP回應(yīng)，但是不會帶上 Access-Control-Allow-Origin 字段，瀏覽器發(fā)現(xiàn)這個跨域請求的返回頭信息沒有該字段，就會拋出一個錯誤，會被 XMLHttpRequest 的 onerror 回調(diào)捕獲到。
這種錯誤無法通過 HTTP 狀態(tài)碼判斷，因為回應(yīng)的狀態(tài)碼有可能是200

2.非簡單請求

條件

出了簡單請求以外的CORS請求。
非簡單請求是那種對服務(wù)器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。

過程

1）預(yù)檢請求

非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預(yù)檢"請求（preflight）。
瀏覽器先詢問服務(wù)器，當(dāng)前網(wǎng)頁所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會發(fā)出正式的XMLHttpRequest請求，否則就報錯。
預(yù)檢請求的發(fā)送請求：

OPTIONS /cors HTTP/1.1
Origin: http://api.qiutc.me
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.qiutc.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

"預(yù)檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭信息里面，關(guān)鍵字段是Origin，表示請求來自哪個源。
除了Origin字段，"預(yù)檢"請求的頭信息包括兩個特殊字段。

Access-Control-Request-Method
該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法，上例是PUT。

Access-Control-Request-Headers
該字段是一個逗號分隔的字符串，指定瀏覽器CORS請求會額外發(fā)送的頭信息字段，上例是X-Custom-Header。

預(yù)檢請求的返回：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.qiutc.me
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

Access-Control-Allow-Methods
必需，它的值是逗號分隔的一個字符串，表明服務(wù)器支持的所有跨域請求的方法。注意，返回的是所有支持的方法，而不單是瀏覽器請求的那個方法。這是為了避免多次"預(yù)檢"請求。

Access-Control-Allow-Headers
如果瀏覽器請求包括Access-Control-Request-Headers字段，則Access-Control-Allow-Headers字段是必需的。它也是一個逗號分隔的字符串，表明服務(wù)器支持的所有頭信息字段，不限于瀏覽器在"預(yù)檢"中請求的字段。

Access-Control-Max-Age
該字段可選，用來指定本次預(yù)檢請求的有效期，單位為秒。上面結(jié)果中，有效期是20天（1728000秒），即允許緩存該條回應(yīng)1728000秒（即20天），在此期間，不用發(fā)出另一條預(yù)檢請求。

2）瀏覽器的正常請求和回應(yīng)

一旦服務(wù)器通過了"預(yù)檢"請求，以后每次瀏覽器正常的CORS請求，就都跟簡單請求一樣，會有一個Origin頭信息字段。服務(wù)器的回應(yīng)，也都會有一個Access-Control-Allow-Origin頭信息字段。

參考：[《跨域資源共享 CORS 詳解》]()http://www.ruanyifeng.com/blog/2016/04/cors.html
)
阮大神的文章，復(fù)制粘貼了不少。

2. jsonp

jsonp = json + padding
其實對于常用性來說，jsonp應(yīng)該是使用最經(jīng)常的一種跨域方式了，他不受瀏覽器兼容性的限制。但是他也有他的局限性，只能發(fā)送 GET 請求，需要服務(wù)端和前端規(guī)定好，寫法丑陋。
它的原理在于瀏覽器請求 script 資源不受同源策略限制，并且請求到 script 資源后立即執(zhí)行。
主要做法是這樣的：

在瀏覽器端：
首先全局注冊一個callback回調(diào)函數(shù)，記住這個函數(shù)名字（比如：resolveJson），這個函數(shù)接受一個參數(shù)，參數(shù)是期望的到的服務(wù)端返回數(shù)據(jù)，函數(shù)的具體內(nèi)容是處理這個數(shù)據(jù)。

然后動態(tài)生成一個 script 標簽，src 為：請求資源的地址＋獲取函數(shù)的字段名＋回調(diào)函數(shù)名稱，這里的獲取函數(shù)的字段名是要和服務(wù)端約定好的，是為了讓服務(wù)端拿到回調(diào)函數(shù)名稱。（如：www.qiute.com?callbackName=resolveJson）。

function resolveJosn(result) {
    console.log(result.name);
}
var jsonpScript= document.createElement("script");
jsonpScript.type = "text/javascript";
jsonpScript.src = "http://www.qiute.com?callbackName=resolveJson";
document.getElementsByTagName("head")[0].appendChild(jsonpScript);

服務(wù)端
在接受到瀏覽器端 script 的請求之后，從url的query的callbackName獲取到回調(diào)函數(shù)的名字，例子中是resolveJson。

然后動態(tài)生成一段javascript片段去給這個函數(shù)傳入?yún)?shù)執(zhí)行這個函數(shù)。比如：

resolveJson({name: "qiutc"});

執(zhí)行
服務(wù)端返回這個 script 之后，瀏覽器端獲取到 script 資源，然后會立即執(zhí)行這個 javascript，也就是上面那個片段。這樣就能根據(jù)之前寫好的回調(diào)函數(shù)處理這些數(shù)據(jù)了。

在一些第三方庫往往都會封裝jsonp的操作，比如 jQuery 的$.getJSON。

3. document.domain

一個頁面框架（iframe／frame）之間（父子或同輩），是能夠獲取到彼此的window對象的，但是這個 window 不能拿到方法和屬性（尼瑪這有什么用，甩臉）。

// 當(dāng)前頁面域名 http://blog.qiutc.me/a.html

</pre>
<p>這個時候，<b>document.domain</b> 就可以派上用場了，我們只要把 <b>http://blog.qiutc.me/a.html</b> 和 <b>http://www.qiutc.me/b.html</b> 這兩個頁面的 <b>document.domain</b> 都設(shè)成相同的域名就可以了。<br>前提條件：這兩個域名必須屬于同一個基礎(chǔ)域名!而且所用的協(xié)議，端口都要一致。<br>但要注意的是，<b>document.domain</b> 的設(shè)置是有限制的，我們只能把 <b>document.domain</b> 設(shè)置成自身或更高一級的父域，且主域必須相同。例如：<b>a.b.example.com</b> 中某個文檔的 <b>document.domain</b> 可以設(shè)成<b>a.b.example.com</b>、<b>b.example.com </b>、<b>example.com</b>中的任意一個，但是不可以設(shè)成 <b>c.a.b.example.com</b>,因為這是當(dāng)前域的子域，也不可以設(shè)成<b>baidu.com</b>,因為主域已經(jīng)不相同了。<br>這樣我們就可以通過js訪問到iframe中的各種屬性和對象了。</p>
<pre>// 主頁面：http://blog.qiutc.me/a.html
<script>
document.domain = "qiutc.me";
function onLoad() {
    var iframe =document.getElementById("iframe");
    var iframeWindow = iframe.contentWindow; // 這里可以獲取 iframe 里面 window 對象并且能得到方法和屬性
    var doc = iframeWindow.document; // 獲取到
}
</script>
<iframe src="http://www.qiutc.me/b.html" onload="onLoad()"

// iframe 里面的頁面

4. window.name

window對象有個name屬性，該屬性有個特征：即在一個窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個 window.name 的，每個頁面對 window.name 都有讀寫的權(quán)限，window.name 是持久存在一個窗口載入過的所有頁面中的，并不會因新頁面的載入而進行重置。
比如有一個www.qiutc.me/a.html頁面，需要通過a.html頁面里的js來獲取另一個位于不同域上的頁面www.qiutc.com/data.html里的數(shù)據(jù)。
data.html頁面里的代碼很簡單，就是給當(dāng)前的window.name設(shè)置一個a.html頁面想要得到的數(shù)據(jù)值。data.html里的代碼：

那么在 a.html 頁面中，我們怎么把 data.html 頁面載入進來呢？顯然我們不能直接在 a.html 頁面中通過改變 window.location 來載入data.html頁面（這簡直扯蛋）因為我們想要即使 a.html 頁面不跳轉(zhuǎn)也能得到 data.html 里的數(shù)據(jù)。
答案就是在 a.html 頁面中使用一個隱藏的 iframe 來充當(dāng)一個中間人角色，由 iframe 去獲取 data.html 的數(shù)據(jù)，然后 a.html 再去得到 iframe 獲取到的數(shù)據(jù)。
充當(dāng)中間人的 iframe 想要獲取到data.html的通過window.name設(shè)置的數(shù)據(jù)，只需要把這個iframe的src設(shè)為www.qiutc.com/data.html就行了。然后a.html想要得到iframe所獲取到的數(shù)據(jù)，也就是想要得到iframe的window.name的值，還必須把這個iframe的src設(shè)成跟a.html頁面同一個域才行，不然根據(jù)前面講的同源策略，a.html是不能訪問到iframe里的window.name屬性的。這就是整個跨域過程。

// a.html



  
  Document
  


  
</body>
</html></pre>
<b>5. HTML5中新引進的window.postMessage</b>
<p><b>window.postMessage(message, targetOrigin)</b>  方法是html5新引進的特性，可以使用它來向其它的window對象發(fā)送消息，無論這個window對象是屬于同源或不同源。兼容性：<br><script type="text/javascript">showImg("https://segmentfault.com/img/bVvIZN");</script></p>
<p>調(diào)用postMessage方法的window對象是指要接收消息的那一個window對象，該方法的第一個參數(shù)message為要發(fā)送的消息，類型只能為字符串；第二個參數(shù)targetOrigin用來限定接收消息的那個window對象所在的域，如果不想限定域，可以使用通配符 *  。<br>需要接收消息的window對象，可是通過監(jiān)聽自身的message事件來獲取傳過來的消息，消息內(nèi)容儲存在該事件對象的data屬性中。<br>上面所說的向其他window對象發(fā)送消息，其實就是指一個頁面有幾個框架的那種情況，因為每一個框架都有一個window對象。在討論第種方法的時候，我們說過，不同域的框架間是可以獲取到對方的window對象的，雖然沒什么用，但是有一個方法是可用的－<b>window.postMessage</b>。下面看一個簡單的示例，有兩個頁面：</p>
<pre>// 主頁面  blog.qiutc.com
<script>
function onLoad() {
    var iframe =document.getElementById("iframe");
    var iframeWindow = iframe.contentWindow;
    iframeWindow.postMessage("I"m message from main page.");
}
</script>
<iframe src="http://www.qiutc.me/b.html" onload="onLoad()"

// b 頁面

6.CSST (CSS Text Transformation)

一種用 CSS 跨域傳輸文本的方案。
優(yōu)點：相比 JSONP 更為安全，不需要執(zhí)行跨站腳本。
缺點：沒有 JSONP 適配廣，CSST 依賴支持 CSS3 的瀏覽器。
原理：通過讀取 CSS3 content 屬性獲取傳送內(nèi)容。
具體可以參考：CSST (CSS Text Transformation)

7.利用flash

flash 嘛，這個東西注定滅亡，不想說了。。。

GPU云服務(wù)器云服務(wù)器 linux域的創(chuàng)建如何更改整個域的時間 jsp獲取作用域的值機柜整理

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/11188.html

發(fā)表評論

登陸后可評論

0條評論

Warren

男|高級講師

我要關(guān)注我要私信

TA的文章

2021愛智先行者—設(shè)備到來之前的先導(dǎo)篇

閱讀 1253·2021-11-24 09:39
【干貨】十分鐘讀懂瀏覽器渲染流程

閱讀 391·2019-08-30 14:12
(譯)原生CSS網(wǎng)格布局學(xué)習(xí)筆記

閱讀 2605·2019-08-30 13:10
SublimeText3系列（1）-安裝、設(shè)置、快捷鍵、常用插件

閱讀 2449·2019-08-30 12:44
花樣形狀 -- CSS

閱讀 974·2019-08-29 16:31
【只差一個小程序】介紹：簡介

閱讀 860·2019-08-29 13:10
XML基礎(chǔ)知識歸納

閱讀 2455·2019-08-27 10:57
尋找最長的單詞算法（JavaScript）

閱讀 3169·2019-08-26 13:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端跨域的整理

條件

過程

1.服務(wù)端允許

2.服務(wù)端拒絕

條件

過程

1）預(yù)檢請求

2）瀏覽器的正常請求和回應(yīng)

相關(guān)文章

前端跨域整理

前端跨域整理

ajax跨域，這應(yīng)該是最全的解決方案了

前端跨域方法論

**總結(jié)跨域的幾種方式**

發(fā)表評論

0條評論

Warren

男|高級講師

TA的文章

2021愛智先行者—設(shè)備到來之前的先導(dǎo)篇

【干貨】十分鐘讀懂瀏覽器渲染流程

(譯)原生CSS網(wǎng)格布局學(xué)習(xí)筆記

SublimeText3系列（1）-安裝、設(shè)置、快捷鍵、常用插件

花樣形狀 -- CSS

【只差一個小程序】介紹：簡介

XML基礎(chǔ)知識歸納

尋找最長的單詞算法（JavaScript）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端跨域的整理

條件

過程

1.服務(wù)端允許

2.服務(wù)端拒絕

條件

過程

1）預(yù)檢請求

2）瀏覽器的正常請求和回應(yīng)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！