摘要:跨域源資源共享同源域名端口協議均相同基本思想是使用自定義的頭部,讓服務器能聲明允許訪問的來源。簡單請求所有的跨域請求簡單或非簡單總會包含一個的請求頭部由瀏覽器添加不受用戶控制。
跨域源資源共享
同源:域名、端口、協議均相同
CORS基本思想是使用自定義的HTTP頭部,讓服務器能聲明允許訪問的來源。
使用CORS時,異步請求會被分為簡單請求(非Preflight)和非簡單請求。
所有的跨域請求(簡單或非簡單)總會包含一個origin的請求頭部,由瀏覽器添加不受用戶控制。值由協議、域名、端口組成,說明請求的來源。下面為一個Origin頭部示例:
Origin:http://www.hello.com
服務器接受這個請求,會在響應頭Access-Control-Allow-Origin回發相同的源信息。( * 表明該資源可以被任意外域訪問)
Access-Control-Allow-Origin:http://www.hello.com非簡單請求
非簡單CORS請求會在正式請求之前發送一次Preflight請求,得到確認之后才會發送真正的XMLHttpRequest請求。瀏覽器自動處理這兩個請求,并且Preflight請求結束后,結果將按照響應中指定的時間緩存起來.所以只是第一次發送這種請求時會多一次HTTP請求.
Preflight請求使用OPTIONS方法,發送下列頭部:
Origin:與簡單請求相同 Access-Control-Request-Method:請求自身使用的方法
以下是一個帶有自定義頭部Custom-Header的使用POST方法發送的請求.
Origin:http://www.hello.com Access-Control-Request-Method:POST Access-Control-Request-Headers:Custom-Header
var url = "http://www.hello.com"; var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.setRequestHeader("Custom-Header", "value"); xhr.send();
服務器通過在響應中發送如下頭部與瀏覽器溝通:
Access-Control-Allow-Origin:http://www.hello.com Access-Control-Allow-Methods:POST,GET Access-Control-Allow-Headers:Custom-Header Access-Control-Allow-Max-Age:28000 //表示將Preflight緩存的時長(秒),期間內無需再次發送預請求
另外通過將XMLHttpRequest的withCredentials屬性設置為true就可以發送帶憑據(cookie、HTTP認證、客戶端SSL證明等)的跨域請求.
var xhr=new XMLHttpRequest(); xhr.withCredentials=true;
如果服務器接受帶憑據的請求會用下面的HTTP頭部響應:
Access-Control-Allow-Credentials:trueJSONP(JSON with padding)
JSONP由兩部分組成:回調函數+數據,回調函數是當響應到來時應該在頁面中調用的函數,回調函數的名字一般是在請求中指定的.而數據就是傳入回調函數中的JSON數據.JSONP是通過動態元素,為其src屬性指定一個跨域的URL.
function doSomething(response) { console.log(response); } var script=document.createElement("script"); script.src="http://www.hello.com?callback=doSomething"; document.body.insertBefore(script,document.body.firstChild);
1.定義方法doSomething,然后把doSomething傳給服務器,告知服務器我需要調用doSomething方法.
2.服務端生成JSON.將JSON數據以參數的形式放到doSomething中,這樣就生成了一段js腳本返回給客戶端.
3.客戶端瀏覽器解析script標簽,執行doSomething(JSON)
otherWindow.postMessage(message, targetOrigin);
otherWindow:指目標窗口,也就是給哪個window發消息,是window.frames屬性的成員或者由 window.open 方法創建的窗口.
參數說明:message: 是要發送的消息,類型為 String、Object (IE8、9 不支持);targetOrigin: 是限定消息接收范圍,不限制請使用*
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93657.html
摘要:在接觸前端開發起,跨域這個詞就一直以很高的頻率在我們學習工作中重復出現,最近在工作中遇到了跨域的相關問題,這里我把它總結記錄一下。 在接觸前端開發起,跨域這個詞就一直以很高的頻率在我們學習工作中重復出現,最近在工作中遇到了跨域的相關問題,這里我把它總結記錄一下。關于跨域,有N種類型,現在我只專注于ajax請求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹),內容...
摘要:關于,強烈推薦閱讀跨域資源共享詳解阮一峰另外,這里也整理了一個實現原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。 前言 從剛接觸前端開發起,跨域這個詞就一直以很高的頻率在身邊重復出現,一直到現在,已經調試過N個跨域相關的問題了,16年時也整理過一篇相關文章,但是感覺還是差了點什么,于是現在重新梳理了一下。 個人見識有限,如有差錯,請多多見諒,歡迎提出iss...
摘要:需注意的是由于同源策略的限制,所讀取的為跨域請求接口所在域的,而非當前頁。目前,所有瀏覽器都支持該功能需要使用對象來支持,也已經成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略,不是協議的一部分。 什么是跨域? 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源,這里跨域是廣義的。 廣義的跨域: 1.) 資源跳轉: A鏈接、重定向、表單提交 2.) 資源...
摘要:上節我們講了同源策略,這節我們講講如何跨域。當這些從的腳本執行出錯,因為違背了同源策略為了保證用戶信息不被泄露,錯誤信息不會顯示出來,取而代之只會返回一個。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦(每...
閱讀 1378·2021-10-08 10:04
閱讀 2681·2021-09-22 15:23
閱讀 2724·2021-09-04 16:40
閱讀 1172·2019-08-29 17:29
閱讀 1492·2019-08-29 17:28
閱讀 2988·2019-08-29 14:02
閱讀 2221·2019-08-29 13:18
閱讀 838·2019-08-23 18:35