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