資訊專欄INFORMATION COLUMN
摘要：什么是跨域個人一句話解釋如果與不同源，那么頁面不能獲取頁面的資源。所以用同源策略來限制跨域是必須的。它是標(biāo)準(zhǔn)，是跨源請求的根本解決方法。
本文整理了一些有關(guān)跨域的基礎(chǔ)知識和細(xì)節(jié)問題。
什么是跨域個人一句話解釋：如果 url A 與 url B 不同源，那么頁面A不能獲取頁面B的資源。這里有兩個關(guān)鍵詞：url 和 同源，瀏覽器的同源策略就是針對兩個url，它們滿足以下三個條件，才是同源：
協(xié)議相同
域名相同
端口相同
https://www.baidu.com/
這里面有兩個細(xì)節(jié)需要提及，域名是包括//到/的所有部分www.baidu.com；沒有指定端口號默認(rèn)是:80端口。
如果一個頁面中的JS可以任意發(fā)起http跨域獲取其他頁面上的資源，這是一件很可怕的事，舉個例子：
張三訪問了某銀行網(wǎng)站 abank.com，服務(wù)器端驗證后會在響應(yīng)頭中加入Set-Cookie字段，然后下次張三再發(fā)起請求，瀏覽器會自動將cookie附加在HTTP請求的首部字段Cookie中，服務(wù)器端就知道張三已經(jīng)登錄過了。
張三接著訪問了危險頁面 danger.com，這個頁面中寫了一些Ajax，它發(fā)起請求訪問abank.com，這一行為用戶不能察覺，如果可以跨域發(fā)起請求，那么瀏覽器同樣會自動將cookie附加在HTTP請求的首部字段Cookie中，這樣這個危險危險網(wǎng)站就登陸了張三的銀行賬戶。
所以用同源策略來限制跨域是必須的。
這里我思考了一個問題，在瀏覽器地址欄里輸入url為什么沒有出現(xiàn)跨域問題？
要明確，同源策略是瀏覽器的行為，在地址欄中輸入url是用戶主觀行為，所以瀏覽器是不判為跨域的。那么同源限制的對象其實是頁面中發(fā)起http請求的js。那同源限制的行為有哪些呢？有以下三種：
Cookie、LocalStorage 和 IndexDB 無法讀取。
DOM 無法獲得。
AJAX 請求不能發(fā)送。
接下來說說規(guī)避跨域限制的集中方式
針對AJAX的跨域 JSONPJSONP利用的的是：
上面的script標(biāo)簽向服務(wù)器example.com發(fā)出請求，該請求有一個查詢字符串callback參數(shù)，用來指定回調(diào)函數(shù)的名字；服務(wù)器發(fā)現(xiàn)請求中有callback參數(shù)，就會將JSON作為指定回調(diào)函數(shù)的參數(shù)，回調(diào)函數(shù)作為腳本返回；腳本返回后，會直接作為代碼運行，這時，只要瀏覽器定義了foo函數(shù)，該函數(shù)就會立即調(diào)用。
JSONP的缺點在于只能發(fā)GET請求。
CORSCORS是跨源資源分享（Cross-Origin Resource Sharing）的縮寫。它是W3C標(biāo)準(zhǔn)，是跨源AJAX請求的根本解決方法。相比JSONP只能發(fā)GET請求，CORS允許任何類型的請求。
CORS需要瀏覽器和服務(wù)器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。
因此，實現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實現(xiàn)了CORS接口，就可以跨源通信。
阮一峰老師關(guān)于CORS的文章非常細(xì)致，跨域資源共享 CORS 詳解，這里僅僅梳理下提綱備查。
瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。
只要同時滿足以下兩大條件，就屬于簡單請求。
請求方法是以下三種方法之一：
HEAD
GET
POST
HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同時滿足上面兩個條件，就屬于非簡單請求。
簡單請求簡單請求的CORS分為以下幾步：
瀏覽器發(fā)現(xiàn)AJAX請求跨源，在請求頭中添加Origin字段，它的值是http請求的源url；
服務(wù)器根據(jù)Origin的值決定是否同意這次請求；
如果Origin指定的域名在服務(wù)器許可范圍內(nèi)，則會在報頭中添加以下三個字段：
Access-Control-Allow-Origin
該字段是必須的。它的值要么是請求時Origin字段的值，要么是一個*，表示接受任意域名的請求.
Access-Control-Allow-Credentials
該字段可選。它的值是一個布爾值，表示是否允許發(fā)送Cookie。默認(rèn)情況下，Cookie不包括在CORS請求之中。設(shè)為true，即表示服務(wù)器明確許可，Cookie可以包含在請求中，一起發(fā)給服務(wù)器，另一方面，開發(fā)者必須在AJAX請求中打開withCredentials屬性。這個值也只能設(shè)為true，如果服務(wù)器不要瀏覽器發(fā)送Cookie，刪除該字段即可。
Access-Control-Expose-Headers
該字段可選。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段。
如果如果Origin指定的域名不在服務(wù)器許可范圍內(nèi)，響應(yīng)頭中沒有Access-Control-Allow-Origin，瀏覽器就會拋出錯誤，中斷這個http請求。
非簡單請求簡單請求的CORS分為以下幾步：
瀏覽器在正式請求之前，先發(fā)送一個預(yù)檢請求，預(yù)檢請求的請求方法是OPTIONS，請求頭中帶以下三個字段：
Access-Control-Request-Method
該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法
Access-Control-Request-Headers
可選，該字段是一個逗號分隔的字符串，指定瀏覽器CORS請求會額外發(fā)送的頭信息字段
如果服務(wù)器端預(yù)檢不通過，瀏覽器報錯；如果通過，返回的響應(yīng)頭中包含以下幾個字段：
Access-Control-Allow-Origin
一定包含
Access-Control-Allow-Methods
一定包含，它的值是逗號分隔的一個字符串，表明服務(wù)器支持的所有跨域請求的方法。
Access-Control-Allow-Credentials
可選
Access-Control-Max-Age
可選，用來指定本次預(yù)檢請求的有效期，單位為秒，未過期的話不用再發(fā)送預(yù)檢請求。
一旦服務(wù)器通過了"預(yù)檢"請求，以后每次瀏覽器正常的CORS請求，就都跟簡單請求一樣，會有一個Origin頭信息字段。服務(wù)器的回應(yīng)，也都會有一個Access-Control-Allow-Origin頭信息字段。
WebSocketWebSocket是一種通信協(xié)議，使用ws://（非加密）和wss://（加密）作為協(xié)議前綴。該協(xié)議不實行同源政策，只要服務(wù)器支持，就可以通過它進行跨源通信。
針對CookieCookie 是服務(wù)器寫入瀏覽器的一小段信息，只有同源的網(wǎng)頁才能共享。但是，兩個網(wǎng)頁一級域名相同，只是二級域名不同，瀏覽器允許通過設(shè)置document.domain共享 Cookie。
舉例來說，A網(wǎng)頁是http://w1.example.com/a.html，B網(wǎng)頁是http://w2.example.com/b.html，那么只要在兩個網(wǎng)頁的腳本中設(shè)置的document.domain="example.com"，兩個網(wǎng)頁就可以共享Cookie。
針對iframe如果兩個網(wǎng)頁不同源，就無法拿到對方的DOM。典型的例子是iframe窗口和window.open方法打開的窗口，它們與父窗口無法通信。對于完全不同源的網(wǎng)站，目前有三種方法，可以解決跨域窗口的通信問題:
片段識別符（fragment identifier）
window.name
跨文檔通信API（Cross-document messaging），HTML5中的window.postMessage
參考文章：
瀏覽器同源政策及其規(guī)避方法
跨域資源共享 CORS 詳解
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96483.html
摘要：學(xué)習(xí)建議在學(xué)習(xí)其中一種跨域方法的時候，建議邊運行項目里的，邊在網(wǎng)上搜索博客文章學(xué)習(xí)這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網(wǎng)上有很多文章詳細(xì)講述跨域知識，只是少了可以本地運行的，所以這里就不再贅述跨域知識。 前言 因為學(xué)習(xí)跨域需要配置本地服務(wù)器，可能會比較麻煩，所以自己根據(jù)網(wǎng)上的博客寫了大多數(shù)跨域的簡單demo，可以自己在本地運行，而且不用配置服務(wù)器。自己對于跨域的理解剛開始...
摘要：學(xué)習(xí)建議在學(xué)習(xí)其中一種跨域方法的時候，建議邊運行項目里的，邊在網(wǎng)上搜索博客文章學(xué)習(xí)這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網(wǎng)上有很多文章詳細(xì)講述跨域知識，只是少了可以本地運行的，所以這里就不再贅述跨域知識。 前言 因為學(xué)習(xí)跨域需要配置本地服務(wù)器，可能會比較麻煩，所以自己根據(jù)網(wǎng)上的博客寫了大多數(shù)跨域的簡單demo，可以自己在本地運行，而且不用配置服務(wù)器。自己對于跨域的理解剛開始...
摘要：學(xué)習(xí)建議在學(xué)習(xí)其中一種跨域方法的時候，建議邊運行項目里的，邊在網(wǎng)上搜索博客文章學(xué)習(xí)這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網(wǎng)上有很多文章詳細(xì)講述跨域知識，只是少了可以本地運行的，所以這里就不再贅述跨域知識。 前言 因為學(xué)習(xí)跨域需要配置本地服務(wù)器，可能會比較麻煩，所以自己根據(jù)網(wǎng)上的博客寫了大多數(shù)跨域的簡單demo，可以自己在本地運行，而且不用配置服務(wù)器。自己對于跨域的理解剛開始...
摘要：說明關(guān)于跨域問題的解決方案多達七八種，你不要說哪有這么多，我不跟你較真哈，你也別跟我較真哈自行百度或這里不會跟你說那么多種只說使用最多的一種你要非說用的不是最多的我不信哦你信好了哈哈你開心就好關(guān)于跨域瀏覽器的同源策略要了解什么是跨域你需要了 說明 關(guān)于跨域問題的解決方案多達七、八種，你不要說哪有這么多，我不跟你較真哈，你也別跟我較真哈, ?！自行 百度 或 Google, 這里不會跟你...
摘要：跨域跨域產(chǎn)生原因協(xié)議名不一樣主機不一樣端口不一樣跨域有無問題請求會產(chǎn)生問題這是瀏覽器處理的結(jié)果通過統(tǒng)一資源定位獲取的圖片資源也是一種跨域但是不會產(chǎn)生問題處理跨域的方法只支持返回響應(yīng)頭允許跨域開發(fā)中使用服務(wù)器代理例如一服務(wù)器端設(shè)置響 web跨域 跨域產(chǎn)生原因: a. 協(xié)議名不一樣 b. 主機不一樣 c. 端口不一樣 跨域有無問題: a. ajax請求會產(chǎn)生問題, 這...
閱讀 3414·2023-04-25 22:04
閱讀 2206·2021-11-22 15:29
閱讀 2175·2021-10-11 10:57
閱讀 1417·2021-09-24 09:48
閱讀 3156·2021-09-09 09:34
閱讀 2556·2021-09-02 15:21
閱讀 2405·2019-08-30 15:53
閱讀 1144·2019-08-30 14:07
