OPTIONS请求 & 已阻止跨源请求:CORS 头缺少 'Access-Control-Allow-Origin'

垃圾sf
  • 873

原问题已解决,我先切个腹。。
先说一下怎么解决的。。。我在服务器端返回的响应头里:
'Access-Control-Allow-origin': 'http://192.168.8.12:8000'
但是我浏览器地址栏里:
http://andy:8000/src/p/index.html
呵呵哒。。。
然后我就把服务器端改成:
'Access-Control-Allow-origin': 'http://andy:8000'
(andy是我在hosts里配置的,指向127.0.0.1)

新问题:
以GET、POST方式请求,响应都很正常,响应头里都带有服务器端添加的头信息;
以OPTIONS方式请求(或PUT和DELETE方式时,都会先发送一个OPTIONS请求):
图片描述
然后jQuery在控制台自然会输出:
图片描述

辣么问题来了:
为什么GET,POST都可以正常请求到响应头,
而OPTIONS取不到服务器端人工添加的头信息?

========================= 分割线 =========================
我model实例.fetch()之后:
图片描述

另:我在实例view前运行了这段代码:
图片描述

再另:其实这段应该不用强调。。不过再说一边吧,看第一个图就可知,服务器端在响应头里加了Access-Control-Allow-Origin这个键,值为*。理论上应该没问题了,但是居然说
Access-Control-Allow-Origin不匹配'*'

请问这个肿么解决。。。

================ 补充 ================
在服务器端给响应头里添加了以下参数:
'Access-Control-Allow-origin': 'http://192.168.8.12'
'Access-Control-Allow-Credentials': 'true'
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS'
'Access-Control-Allow-Headers': ‘Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With'
'Content-Type': 'text/html; charset=utf-8'

我通过POST请求,然后:
图片描述
报这个错是什么节奏呢。。。求教育。。。。

我当前ip:192.168.8.12
服务器端ip:192.168.0.118

回复
阅读 238.5k
8 个回答

@SyuTingSong 只说了一半,最主要的原因是你的请求中withCredentials设为了true

解决方案如下:

Access-Control-Allow-Origin必须设置为具体的域名,而不能设置为*。

例如:

Access-Control-Allow-Origin: http://foo.example

简单原因:

Important note: when responding to a credentialed request, server must specify a domain, and cannot use wild carding.

引用自HTTP access control (CORS) - HTTP | MDN

标准写法是Access-Control-Allow-Origin
~~但是你截图里返回的是小写的,服务器配置里改成大写看看。~~

另外Access-Control-Allow-Methods这个字段也是必须的。

建议后台添加如下配置:

add_header 'Access-Control-Allow-origin' 'http://www.example.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST';

你用了withCredentials,需要在服务器返回Header中加入Access-Control-Allow-Credentials: true,参考MDN

以node koa为例

    app.use(function *(){
    let {method, url, header} = this.request;

    this.set('Access-Control-Allow-Origin', '*');

    if (method.toLowerCase() === 'options') {
        this.set('Access-Control-Allow-Credentials', 'true');
        this.set('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
        this.set('Access-Control-Allow-Headers', 'cache-control,content-type,hash-referer,x-requested-with');

        this.body = '';
        return false;
    }

    // 下面是正常逻辑.....

});

app.listen(9870);
    this.set('Access-Control-Allow-Headers', 'cache-control,content-type,hash-referer,x-requested-with'); //注意值是小写 !!!!!

这里判断method是因为浏览器第一次会发起一个options来检查服务器是否支持跨域访问,如下图

clipboard.png

浏览器先去判断服务器是否返回了指定的值(上面设置的那些),如果是支持的,才会去发起真正的请求,如下图

clipboard.png

以上这个GET才是我真正发起的请求


虽然也可以不去判断是否是options请求,但这样的话会返回不必要的数据

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏