JavaScript 怪异的跨域 Ajax 请求

hxh1246996371 · 2016年05月16日 · 最后由 lancoder 回复于 2019年06月23日 · 6252 次阅读

事情是这样的，我们目前的开发模式是前端发请求到后端的 API，而且是跨域的，然后在每个请求中的携带了一些自定义的 header，于是乎就需要在服务端配置 Access-Control-Allow-Headers 来允许这些自定义 header 的传递。而且在请求每个 API 之前都会发一个 options请求

在 chrome 下没有任何问题，然后到了 IE 下，注意是 IE10 和 IE11（下面的版本没测）都报了奇葩的错误

Access-Control-Allow-Headers 列表中不存在请求标头 x-dp-key
XMLHttpRequest: 网络错误 0x80070005, 拒绝访问。

这个确实有点过分，然后我看了一下请求的详情，只有一个 options请求：

请求 URL: http://192.168.1.120/openapi/api/1.0/classes/pre_selectable_states?limit=200&where={}&include={}
请求方法: OPTIONS
状态码: 200 / OK

Request headers:

Accept: */*
Accept-Encoding: gzip, deflate
Access-Control-Request-Headers: accept, x-dp-key, x-dp-id
Access-Control-Request-Method: GET
Cache-Control: no-cache
Connection: Keep-Alive
Content-Length: 0
Host: 192.168.1.120
Origin: http://192.168.26.128:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko

Response headers:

Access-Control-Allow-Headers: Origin ,X-Requested-With ,Content-Type ,Accept ,X-DP-Key ,X-DP-ID ,X-DP-Token ,Access-Control-Request-Method
Access-Control-Allow-Methods: GET ,POST ,OPTIONS ,PUT ,PATCH ,DELETE
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Length: 0
Content-Type: text/html; charset=UTF-8
Date: Mon, 16 May 2016 07:05:59 GMT
Keep-Alive: timeout=5, max=100
Server: Apache/2.4.10 (Unix) OpenSSL/1.0.1j PHP/5.6.3 mod_perl/2.0.8-dev Perl/v5.16.3
X-Powered-By: PHP/5.6.3

很明显，上面的 Access-Control-Allow-Headers 中已经包含了我要传递的 3 个 header X-DP-Key ,X-DP-ID ,X-DP-Token，但是 IE 就是给我报这个错误，不知道大家有没有遇到类似的问题。

我的请求方法是：

$.ajax({
      type: method,
      url: url,
      data: data,
      crossDomain: true,
      headers: {
        "X-DP-Key":  "XXX",
        "X-DP-ID": "XXX",
        "X-DP-Token": Cookies.get('token')
      },
      success: successHandler,
      error: errorHandler
    })