當訪問乙個資源檔案時，如果從非該資源檔案所在的伺服器不同網域名稱或者埠處進行訪問時，該資源會發起乙個跨域請求。例如，**a的位址是 ,該**中html頁面通過
img標籤中的src屬性請求 資源，此時，就發生了跨域請求。
處於安全考慮，瀏覽器限制從指令碼內發起的跨域資源請求。例如，xhr和fetch的api遵循同源策略。這意味著使用這些api只能從同乙個域才能請求資源檔案。
需要注意的是，跨域不一定是瀏覽器限制了發起跨域請求，也可能是跨域請求可以正常發起，但是返回的資料被瀏覽器截獲。
最好的例子就是csrf跨站攻擊，有些瀏覽器不允許從https的**跨域訪問http, 比如chorme 和 firefox,這些瀏覽器在請求還未發出時就會攔截請求。
cors 機制允許web 伺服器對跨域訪問進控制，從而保證跨域資料傳輸安全進行。目前瀏覽器都支援該機制，不過需要跨域訪問需要客戶端和服務端同時支援。
瀏覽器會針對xhr和fetch中發起的跨域請求傳送特殊的http header 請求頭資訊。並且服務端也必須返回允許使用特定的跨域響應的header 頭資訊。
詳細鏈結
cors標準新增了一組http首部字段，允許伺服器宣告哪些請求源有許可權訪問哪些資源。另外，規範要求，那些可能導致伺服器產生隱患的http請求方法(除get之外的請求)，瀏覽器必須首先使用options方法發起乙個預檢請求(preflight request),從而獲知服務端是否允許該跨域請求。服務端返回允許響應後，才發起實際的http請求。在預檢請求的返回中，服務端也可以通知客戶端，是否需要攜帶身份憑證(cookies和http認證相關資料)。
這裡，我們通過xhr物件介紹三個跨域資源共享的例項。
簡單請求的特徵：
fetch 規範定義，不得自定義下面header之外的其他首部字段
content-type的值為下列之一
請求中任意xmlhttprequestupload物件均沒有註冊任何事件***
請求中沒有使用readablestream物件
客戶端和服務端之間使用cors首部字段處理跨域許可權：
檢視乙個跨域請求例項:
服務端返回的access-control-allow-origin: *表明該資源可以被任意網域名稱訪問，不收跨域限制。
預檢請求要求必須首先使用options方法發起乙個預檢請求到服務端，來獲知服務端是否允許該實際請求。
預檢請求的滿足條件：
人為設定以下集合之外的首部字段。該集合為:
multipart/form-data
text/plain
請求中任意xmlhttprequestupload物件註冊多個事件***
請求中使用了readablestream物件
options 請求
post 請求
執行過程：
瀏覽器首先檢查到，js發起的請求需要被預檢。request method:options表示這個是乙個預檢請求，該方法不會對伺服器資源產生影響，預檢請求中同時攜帶了下面兩個首部字段：
access-control-request-method: post
access-control-request-headers: content-type
access-control-request-method通知服務端，實際請求將使用post方法。
首部字段access-control-request-headers通知服務端，實際請求將攜帶content-type字段。
服務端根據預檢頭資訊，判斷實際請求是否被允許。
通常情況下，瀏覽器傳送跨域請求時不會傳送身份憑證資訊，如果要傳送憑證資訊的話，就要在對xhr物件設定特殊的標誌位。
本例中，我們對xhr物件的withcredentials標置設定為true,從而可以向跨域的伺服器傳送cookies資訊。
對於帶憑證的請求，服務端不可將access-control-allow-origin值設定為「*」。
這是因為請求的首部中攜帶cookie資訊，如果設定為「*」，請求將會失敗。將access-control-allow-origin值設定為請求方的host，則請求執行成功。
origin表明了首部欄位預檢請求或實際請求的源端。
origin:access-control-request-method首部字段用於預檢請求。作用是通知實際請求使用的http方法。
access-control-request-method:
access-control-request-headers收不自動用於預檢請求。做使用者通知實際請求中攜帶的首部字段通知給服務端。
access-control-request-headers
:
access-control
-allow
-origin:
|*
如果，允許接收指定乙個具體的域請求時
access-control
-allow
-origin:
vary字段值必須包含origin。這將告訴客戶端：伺服器對不同源站返回不同的內容。
服務端將瀏覽器允許訪問的頭放入白名單，例如:
access-control
-expose
-headers: x-header
指明該預檢請求可以被快取多久。
當瀏覽器的credentials設定為true時，是否允許瀏覽器讀取response內容。
access-control
-allow
-credentials: true
access-control
-allow
-methods:
access-control
-allow
-headers:
>
跨域資源共享 CORS
cors需要瀏覽器和伺服器同時支援。目前，所有瀏覽器都支援該功能。前端 對應於前端請求來說cors通訊與同源的ajax通訊沒有差別，完全一樣。瀏覽器一旦發現ajax請求跨源，就會自動新增一些附加的頭資訊，有時還會多出一次附加的請求，但使用者不會有感覺。後端 只要伺服器實現了cors介面，就可以跨源通...
跨域資源共享 CORS
跨域資源共享 cross origin resource sharing 是一種機制，它使用額外的 http 頭部告訴瀏覽器可以讓乙個web應用進行跨域資源請求。若乙個請求同時滿足下述所有條件，則該請求可視為 簡單請求 注 灰色字型內容了解即可 手動設定的頭部字段只能是 注意 也可以設定 forbi...
CORS 跨域資源共享
foreword cors principle 三個訪問控制場景 簡單請求 預請求帶憑據的請求 http請求頭 http響應頭 ie對cors的實現 瀏覽器的支援 由於同源策略限制從乙個源載入的文件或指令碼與來自另乙個源的資源進行互動。在web開發中跨域是難免的問題，或是開發時的跨域，或是線上資源請...