CORS 标头“Access-Control-Allow-Origin”不匹配...但确实如此‼答案

【问题标题】：CORS header 'Access-Control-Allow-Origin' does not match... but it does‼CORS 标头“Access-Control-Allow-Origin”不匹配...但确实如此‼
【发布时间】：2016-05-20 02:57:23
【问题描述】：

我正在用 Java 制作一个非常简单的 JSON API。它实际上是一个提供对象坐标的 Project Zomboid mod。这是我的 HTTP 处理程序的样子：

public class JSONZomboid implements HttpHandler
{
    @Override
    public void handle(HttpExchange t) throws IOException {
        // HEADERS
        Headers headers = t.getResponseHeaders();
        headers.set("Content-Type", "text/json");   
        headers.set("Access-Control-Allow-Origin", "pzmap.crash-override.net");                 
        t.sendResponseHeaders(200,0);
        //BODY
        OutputStream os = t.getResponseBody();
        os.write("{\n".getBytes());
          // generate JSON here
        os.write("}".getBytes());
        os.close();
    }
}

我想使用用户脚本将其加载到 Project Zomboid 地图项目中，这意味着我需要启用 CORS 才能连接。这是通过简单的代码完成的：

PlayerRenderer.prototype.fetchInfo = function() {
  $.get("http://127.0.0.1:8000/test", {}, this.displayPoints.bind(this));
}

但我收到此错误：

警告：跨域请求被阻止：同源策略不允许读取位于http://127.0.0.1:8000/test 的远程资源。（原因：CORS 标头“Access-Control-Allow-Origin”与“pzmap.crash-override.net”不匹配）。

即使在控制台中我也可以清楚地看到错误具有误导性：

如果我还没有讨厌 CORS，我现在会开始讨厌它。您能告诉我允许来源标头中的实际字符串是什么吗？

【问题讨论】：

标头应包含允许访问内容的站点的主机名。如果您从托管在pzmap.crash-override.net 的站点加载页面，那么它应该可以工作。该错误告诉您标头包含什么，而不是源域是什么。
您可以在请求标头（Origin 和 Referer）中查看我从哪个站点加载。
实际上在小屏幕上很难看到这些图像的细节：/
另外我认为标头值可能需要是一个完整的URI，比如http://pzmap.crash-override.net
第一条评论对我帮助很大！谢谢！！ :-)

标签： javascript http-headers cors firebug

【解决方案1】：

我为同样的问题苦苦挣扎了几个小时，发现我在 origin:https://foo.com/ 的末尾添加了一个正斜杠，而它应该是 https://foo.com。（谈论一个重要的面对面的时刻！）

我的（正在运行的）Express Node.JS 设置：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  methods: 'GET,POST,PATCH,DELETE,OPTIONS',
  optionsSuccessStatus: 200,
  origin: 'https://foo.com'
}));
app.options('*', cors());

【讨论】：

【解决方案2】：

上面的注释 #1 是正确的：CORS 需要 Access-Control-Allow-Origin 标头与客户端的原始请求相匹配（用于端到端 SSL 体验）。因此，在这种情况下，请确保在 Access-Control-Allow-Origin 标头中设置 pzmap.crash-override.net。

两个音符：

1- 尽管您可能会在线阅读，nginx 目前需要将多个条目列为单独的行，例如： add_header Access-Control-Allow-Origin "https://developers.google.com"; add_header Access-Control-Allow-Origin "https://imasdk.googleapis.com";

2 - 此外，尽管您可能会在线阅读，但不能使用通配符。并非所有客户端（即浏览器）都允许这样做。

【讨论】：

【解决方案3】：

实际问题是Access-Control-Allow-Origin 标头应该包含协议，而不仅仅是主机名。如果网络浏览器只是将这部分包含在错误消息中会更好。

所以在上面，做：

headers.set("Access-Control-Allow-Origin", "http://pzmap.crash-override.net");

【讨论】：

headers.set("Access-Control-Allow-Origin", "pzmap.crash-override.net/"); 也不起作用，最终花了 2 个小时来解决删除最后一个斜线符号... :(