这个答案涵盖了很多内容，因此分为三个部分：

• 如何使用 CORS 代理避免 “无 Access-Control-Allow-Origin 标头” 问题
• 如何避免 CORS 预检
• 如何解决 “Access-Control-Allow-Origin 标头不能是通配符” 问题

如何使用 CORS 代理避免 “无 Access-Control-Allow-Origin 标头” 问题

如果您无法控制前端代码发送请求的服务器，并且该服务器响应的问题只是缺少必要的 Access-Control-Allow-Origin 标头，您仍然可以让事情正常运转 - 通过 CORS 代理发出请求。

您可以使用来自 https://github.com/Rob--W/cors-anywhere/ 。
您还可以使用 5 条命令，在 2-3 分钟内轻松将自己的代理部署到 Heroku：

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

运行这些命令后，您将拥有自己的 CORS Anywhere 服务器，例如， https://cryptic-headland-94862.herokuapp.com/ 。

现在，在您的请求 URL 前加上代理的 URL：

https://cryptic-headland-94862.herokuapp.com/https://example.com

将代理 URL 添加为前缀会导致请求通过您的代理发出，从而：

1. 将请求转发到 https://example.com 。
2. 接收响应来自 https://example.com 。
3. 将 Access-Control-Allow-Origin 标头添加到响应。
4. 将该响应连同添加的标头一起传递回请求前端代码。

然后，浏览器允许前端代码访问响应，因为带有 Access-Control-Allow-Origin 响应标头的响应就是浏览器所看到的。

即使请求是触发浏览器执行 CORS 预检 OPTIONS 请求的请求，这也能起作用，因为在这种情况下，代理还会发送使预检成功所需的 Access-Control-Allow-Headers 和 Access-Control-Allow-Methods 标头。

如何避免 CORS 预检

问题中的代码触发 CORS预检 - 因为它发送了一个 Authorization 标头。

https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

即使没有这个， Content-Type: application/json 标头也会触发预检。

“预检”的含义是：在浏览器尝试问题代码中的 POST 之前，它首先向服务器发送 OPTIONS 请求，以确定服务器是否选择接收具有 Authorization 和 Content-Type: application/json 标头的跨源 POST 。

It works pretty well with a small curl script - I get my data.

要使用 curl 正确测试，您必须模拟浏览器发送的预检 OPTIONS ：

curl -i -X OPTIONS -H "Origin: http://127.0.0.1:3000" \
    -H 'Access-Control-Request-Method: POST' \
    -H 'Access-Control-Request-Headers: Content-Type, Authorization' \
    "https://the.sign_in.url"

…将 https://the.sign_in.url 替换为您实际的 sign_in URL。

浏览器从该 OPTIONS 请求中需要的响应必须具有如下标头：

Access-Control-Allow-Origin:  http://127.0.0.1:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type, Authorization

如果 OPTIONS 响应不包含这些标头，浏览器将立即停止并且永远不会尝试发送 POST 请求。此外，响应的 HTTP 状态代码必须是 2xx - 通常为 200 或 204。如果是任何其他状态代码，浏览器将立即停止。

问题中的服务器使用 501 状态代码响应 OPTIONS 请求，这显然意味着它试图表明它没有实现对 OPTIONS 请求的支持。在这种情况下，其他服务器通常会响应 405“方法不允许”状态代码。

因此，如果服务器对该 OPTIONS 请求的响应为 405 或 501 或除 200 或 204 之外的任何代码，或者不响应那些必要的响应标头，您将永远无法从前端 JavaScript 代码直接向该服务器发出 POST 请求。

避免触发问题中的情况的预检的方法是：

• 如果服务器不需要 Authorization 请求标头，而是依赖于嵌入在 POST 请求正文中的身份验证数据或作为查询参数
• 如果服务器不需要 POST 正文具有 Content-Type: application/json 媒体类型，而是接受了 POST 主体为 application/x-www-form-urlencoded ，带有一个名为 json （或其他名称）的参数，其值为 JSON 数据

如何修复 “Access-Control-Allow-Origin 标头不能是通配符” 问题

_{I am getting another error message:}

_{The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin ' http://127.0.0.1:3000 ' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.}

对于具有凭据的请求，如果 Access-Control-Allow-Origin 标头的值为 * ，则浏览器不会让您的前端 JavaScript 代码访问响应。相反，在这种情况下，值必须与前端代码的来源完全匹配， http://127.0.0.1:3000 。

请参阅 MDN HTTP 访问控制 (CORS) 文章中的 凭证请求和通配符 。

如果您控制发送请求的服务器，处理这种情况的常用方法是将服务器配置为获取 Origin 请求标头的值，并将其回显/反射回 Access-Control-Allow-Origin 响应标头的值；例如，使用 nginx：

add_header Access-Control-Allow-Origin $http_origin

但这仅仅是一个例子；其他（Web）服务器系统也有类似的方式来回显原始值。

I am using Chrome. I also tried using that Chrome CORS Plugin

该 Chrome CORS 插件显然只是简单地将 Access-Control-Allow-Origin: * 标头注入到浏览器看到的响应中。如果该插件更智能，它会将那个假的 Access-Control-Allow-Origin 响应标头的值设置为前端 JavaScript 代码的实际来源， http://127.0.0.1:3000 。

因此，即使是为了测试，也请避免使用该插件。它只会分散注意力。要测试在没有浏览器过滤的情况下从服务器获得的响应，最好使用上述 curl -H 。

至于问题中 fetch(…) 请求的前端 JavaScript 代码：

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

删除上面的行。 Access-Control-Allow-* 标头是 响应 标头。您永远都不想在请求中发送它们。这样做的唯一效果是触发浏览器执行预检。

当客户端URL和服务器URL不匹配（包括端口号）时，会发生此错误。在这种情况下，您需要启用CORS的服务，即交叉原点资源共享。

如果您托管了Spring Rest服务，则可以在博客文章 春季框架中的cors支持 。 。

如果您使用node.js服务器托管服务，则

1. 停止node.js服务器。
2. npm安装cors -save
3. 向您的服务器添加以下行

出现此问题的原因是您在前端将以下代码添加为 request 标头：

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

这些标头属于 response ，而不是请求。因此请 删除 它们，包括以下行：

headers.append('GET', 'POST', 'OPTIONS');

您的请求包含 'Content-Type: application/json' ，因此触发了所谓的 CORS 预检。这导致浏览器使用 OPTIONS 方法发送请求。有关详细信息，请参阅 CORS 预检 。

因此，在您的 后端 中，您必须通过返回包含以下内容的响应标头来处理此预检请求：

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept

当然，实际语法取决于您用于后端的编程语言。

在您的前端，它应该是这样的：

function performSignIn() {
    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));
    headers.append('Origin','http://localhost:3000');

    fetch(sign_in, {
        mode: 'cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed: ' + error.message));
}