JavaScript 怪异的跨域 Ajax 请求

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

事情是这样的,我们目前的开发模式是前端发请求到后端的 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
    })

把自定义的 header 格式化一下扔进 Authentication

(瞎猜的)去掉空格试试?

#1 楼 @ayaseangle 这个跟 Authentication 没什么关系吧

提供一些思路,不保证能帮上忙,😁

  1. 如果你还没有使用 rack-cors,先换上
  2. 尝试一下大小写和纯字母的写法
  3. 参考一下知名网站跨域的做法

补充几个相关链接:

#5 楼 @zlx_star 谢谢 费心了 我试试看看

楼主,怎么解决的?

lancoder 回复

已经不做 Rails 开发了哥

hxh1246996371 回复

那当时的这个问题解决了吗?现在碰到了,感觉很诧异啊,毫无头绪😭 😭 😭 😭 😭

需要 登录 后方可回复, 如果你还没有账号请 注册新账号