ajax跨域請求在IE下報錯Access-Control-Allow-Headers 列表中不存在請求標頭 content-type

ajax發起post請求時,IE瀏覽器報錯,但其它瀏覽器正常,錯誤如下:

 

首先介紹下跨域請求:

W3C標準:CROS,全稱是跨域資源共享 (Cross-origin resource sharing),它的提出就是爲了解決跨域請求的。

跨域資源共享(CORS)標準新增了一組 HTTP 首部字段,允許服務器聲明哪些源站有權限訪問哪些資源。另外,規範要求,對那些可能對服務器數據產生副作用的HTTP 請求方法(特別是 GET 以外的 HTTP 請求,或者搭配某些 MIME 類型的 POST 請求),瀏覽器必須首先使用 OPTIONS 方法發起一個預檢請求(preflight request),從而獲知服務端是否允許該跨域請求。服務器確認允許之後,才發起實際的 HTTP 請求。在預檢請求的返回中,服務器端也可以通知客戶端,是否需要攜帶身份憑證(包括 Cookies 和 HTTP 認證相關數據)。

而本次post請求時,加入了以下請求頭:Content-Type:application/json,Authentication:auth 等,因此需要發送預檢請求,將會在請求頭:Access-Control-Request-Headers 上帶上頭部信息,如下:

而如果響應頭爲:Access-Control-Allow-Headers:*,值爲*,即未指定具體允許的請求頭,如下:

則在IE瀏覽器下會出現以錯誤:Access-Control-Allow-Headers 列表中不存在請求標頭 content-type

解決辦法:在後端響應時,加入具體允許的響應頭即可,如在nginx中加入以下代碼:

add_header Access-Control-Allow-Headers 'Content-Type,Fetch-Mode,accept';

 

參考:https://segmentfault.com/a/1190000012550346

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章