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