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

Question

原问题已解决，我先切个腹。。
先说一下怎么解决的。。。我在服务器端返回的响应头里：
'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

Answer 1

@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

Answer 2

标准写法是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';

Answer 3

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

Answer 4

以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来检查服务器是否支持跨域访问,如下图

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

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

---

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

Answer 5

最好的解决方法是设置服务器规则，用白名单 https://www.uedbox.com/post/5...

Answer 6

请问楼主这个问题解决了吗 是怎么解决的可以分享一下吗，我也遇到和你一样的问题，求助您一下！谢谢！！

Answer 7

神奇的一次旅程~~受教了

Answer 8

怎么解决的，按照你的办法还是不行，求