瀏覽器與伺服器通訊技術跨域資源共享

由於同源策略限制，預設情況下，使用xhr物件只能訪問與包含它的頁面位於同乙個域(相同的協議、網域名稱和埠)中的資源。要實現合理的跨域資源請求，有兩種策略：1.跨域資源共享，2.利用dom中能夠執行跨域請求的功能。本文詳述了第一種策略的實現方法。

跨域資源共享（cors）背後的基本思想，就是使用自定義的http頭部讓瀏覽器與伺服器進行溝通，從而決定請求或相應是應該成功，還是應該失敗。這種方法需要修改伺服器**。

如果只是簡單的使用get或post傳送請求，並且沒有自定義的頭部，且主體內容是text/plain。在傳送該請求時，需附加乙個額外的origin頭部，其中包含請求頁面的源資訊(協議、網域名稱和埠)，伺服器會根據這個頭部資訊來決定是否給與響應。頭部例項如下：

大部分瀏覽器都通過xmlhttprequest物件實現了cors的原生支援。在訪問不同域的資源時，無需額外編寫**就會自動傳送origin頭部。只需要在open()方法中傳入絕對url即可，例如：

如果伺服器認為這個請求可以接受，就會在access-control-allow-origin頭部中回發相同的源資訊（如果是公共資源，可以回發『 * 』），比如在伺服器的php**中加入以下**，來傳送access-control-allow-origin頭部：

1. 不能使用setrequestheader（）方法設定自定義頭部。

2. 不能傳送和接受cookie。

3. 呼叫getallresponseheaders（）方法總會返回空字串。

預檢請求(preflighted requests)必須首先使用options方法發起乙個預檢請求到伺服器，以獲知伺服器是否允許該實際請求。「預檢請求」的使用，可以避免跨域請求對伺服器的使用者資料產生無法預知的影響。options方法發出的請求頭部如下：

origin：與簡單的請求相同。

access-control-request-method：請求使用的方法

access-control-request-headers：自定義的頭部資訊，多個頭部以逗號分隔。

當使用setrequestheader（）方法設定了自定義頭部，或者請求方法不是get或post時，就會自動傳送預檢請求：

伺服器通過在響應中傳送如下頭部資訊與瀏覽器溝通，php**如下：

允許的方法

3header('access-control-allow-headers:x-token'); //

允許的頭部

4header('access-control-max-age:7800'); //

應該將預檢請求快取多長時間

預設情況下，跨域請求不提供憑據（cookie,http認證及客戶端ssl證明等）。通過將xhr的withcredentials屬性設定為true，可以指定某個請求應該傳送憑據。如果伺服器接送帶憑據的請求，會用下面的http頭部來響應。

header('access-control-allow-credentials: true');

瀏覽器與伺服器通訊技術 跨域資源共享