1、跨域請(qǐng)求
從本域名訪問不同域名或端口的http請(qǐng)求統(tǒng)一稱為跨域請(qǐng)求主穗，為了安全起見悲关，瀏覽器會(huì)阻止從腳本中(比如js、css)發(fā)起http跨域請(qǐng)求撤逢，但資源以嵌入的方式是可以加載的膛锭。
以下是可能嵌入跨源的資源的一些示例：
- <script src="..."></script>標(biāo)簽嵌入跨域腳本。語法錯(cuò)誤信息只能在同源腳本中捕捉到蚊荣。
- <link rel="stylesheet" href="...">標(biāo)簽嵌入CSS初狰。由于CSS的松散的語法規(guī)則，CSS的跨域需要一個(gè)設(shè)置正確的Content-Type消息頭互例。不同瀏覽器有不同的限制：
IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera奢入。- <img>嵌入圖片。支持的圖片格式包括PNG,JPEG,GIF,BMP,SVG,...
- <video> 和 <audio>嵌入多媒體資源
- <object>媳叨，<embed>和<applet>的插件
- @font-face
引入的字體腥光。一些瀏覽器允許跨域字體（ cross-origin fonts），一些需要同源字體（same-origin fonts）糊秆。- <frame>
和 <iframe>載入的任何資源武福。站點(diǎn)可以使用
X-Frame-Options消息頭來阻止這種形式的跨域交互。
非嵌入式http跨域請(qǐng)求分兩種：
- 簡(jiǎn)單請(qǐng)求
簡(jiǎn)單請(qǐng)求需要滿足三個(gè)條件：- 請(qǐng)求的methods僅限于GET痘番、HEAD捉片、POST
- Content-Type頭值必須為text/plain|multipart/form-data|application/x-www-form-urlencoded其中之一
- 請(qǐng)求頭部不可以添加額外的頭部
此類請(qǐng)求只是簡(jiǎn)單的發(fā)送請(qǐng)求，是否能成功汞舱，需要服務(wù)器端配置Access-Control-Allow-Origin: yourDomain | *
- 預(yù)檢請(qǐng)求
與前述簡(jiǎn)單請(qǐng)求不同伍纫，“需預(yù)檢的請(qǐng)求”要求必須首先使用 OPTIONS
方法發(fā)起一個(gè)預(yù)檢請(qǐng)求到服務(wù)器，以獲知服務(wù)器是否允許該實(shí)際請(qǐng)求兵拢。"預(yù)檢請(qǐng)求“的使用翻斟，可以避免跨域請(qǐng)求對(duì)服務(wù)器的用戶數(shù)據(jù)產(chǎn)生未預(yù)期的影響
簡(jiǎn)單請(qǐng)求需要滿足三個(gè)條件：- 請(qǐng)求的methods為PUT 、DELETE 说铃、CONNECT 、OPTIONS 嘹履、TRACE 腻扇、PATCH中任一種HTTP方法
- Content-Type頭值不為text/plain|multipart/form-data|application/x-www-form-urlencoded其中之一
- 請(qǐng)求頭部添加了額外的頭部
所謂預(yù)檢請(qǐng)求，就是在正式請(qǐng)求發(fā)送之前砾嫉，先發(fā)送一個(gè)OPTIONS請(qǐng)求去服務(wù)器詢問服務(wù)器是否處理正式請(qǐng)求的method以及帶的headers幼苛，如果處理，那就發(fā)送正式請(qǐng)求焕刮，否則報(bào)錯(cuò) code 405舶沿。
比如發(fā)送一個(gè)跨域的get請(qǐng)求墙杯，但是添加了一個(gè)headers: {myheader: true}, 這樣滿足了預(yù)檢請(qǐng)求的條件，瀏覽器攔截到該get請(qǐng)求后括荡，檢查到headers中有額外headers高镐，那么就會(huì)自己先發(fā)一個(gè)OPTIONS請(qǐng)求，帶上get請(qǐng)求的method與headers去訪問服務(wù)器畸冲。
2嫉髓、跨域請(qǐng)求需要帶上cookie
當(dāng)發(fā)送跨域請(qǐng)求時(shí)，有時(shí)需要帶上cookie或者其他證書去認(rèn)證邑闲，需要在前端請(qǐng)求headers中添加withCredentials:true,這樣才會(huì)帶上cookie算行，并且服務(wù)器端的響應(yīng)中需攜帶 Access-Control-Allow-Credentials: true，否則瀏覽器將不會(huì)把響應(yīng)內(nèi)容返回給請(qǐng)求的發(fā)送者苫耸。
注意州邢，對(duì)于附帶身份憑證的請(qǐng)求，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為“*”褪子。
這是因?yàn)檎?qǐng)求的首部中攜帶了 Cookie 信息偷霉，如果 Access-Control-Allow-Origin 的值為“*”，請(qǐng)求將會(huì)失敗褐筛。而將 Access-Control-Allow-Origin 的值設(shè)置為http://yourhost.com类少，則請(qǐng)求將成功執(zhí)行。
另外渔扎，響應(yīng)首部中也攜帶了 Set-Cookie 字段硫狞，嘗試對(duì) Cookie 進(jìn)行修改。如果操作失敗晃痴，將會(huì)拋出異常残吩。
參考：
1、瀏覽器的同源策略
2倘核、HTTP訪問控制（CORS）
3泣侮、前后端通訊系統(tǒng)
4、web font 字體跨域
