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