如何修复带有"credentials: include"的CORS错误？

Question

另一个关于CORS的问题，我查看了很多信息，但是仍然无法解决。所以，我将非常感谢您的帮助。

我正在发送启用凭据的fetch请求。浏览器通常会在Access-Control-Allow-Credentials上发出警告。我尝试配置代理，但它也无法解决问题。因此，我需要在服务器响应设置中添加Access-Control-Allow-Credentials。但是我不知道该如何实现。
我正在使用create-react-app。甚至没有熟悉的服务器代码文件。

错误：

 The value of the 'Access-Control-Allow-Credentials' header in the response is ''
 which must be 'true' when the request's credentials mode is 'include'

响应头：

access-control-allow-origin: http://localhost:3000

请求头：

WARNING Provisional headers are shown
Access-Control-Request-Headers: access-control-allow-credentials,access-control-allow-origin
Access-Control-Request-Method: GET
Origin: http://localhost:3000
Referer: http://localhost:3000/

- Max

---

你的问题有点矛盾。你提到了响应头中Access-Control-Allow-Credentials具有有效值，但错误消息说响应的值是''。哪一个是正确的？ - Panther

你能否在后端应用程序中添加Access-Control-Allow-Credentials=true？ - Pedro Caseiro

@Panther，请求头具有有效的Access-Control-Allow-Credentials，但我不知道如何将其添加到响应头中。 - Max

将该标头添加到请求中毫无意义 - 请求者不能决定允许什么。否则，限制的存在有何意义？您需要找出如何在特定的服务器/编程语言/框架中添加此类标头。如果您在此处提供有关此事的详细信息，我们可能可以帮助您解决问题。 - ADyson

Answer 1

嗨，在您的node.js的server.js或app.js中使用以下代码：

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());
app.all('*', function (req, res) {
   res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");```

- Mary

Answer 2

如果您的后端使用Express，请尝试添加以下代码片段：

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Credentials', true);
    res.header(
        'Access-Control-Allow-Headers',
        'Origin, X-Requested-With, Content-Type, Accept'
    );
    next();
});

另一种解决方案是使用cors模块，只需基本安装即可：

npm install cors --save

在您的服务器上添加以下代码：

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());

- ThanhPhanLe

Answer 3

由于您正在使用create-react-app，最简单的方法是使用代理，使请求看起来像来自同一域，并完全避免CORS。假设您的后端服务器将在同一主机上，这实际上更接近生产。

Webpack有一种干净的方法来实现这一点。请参阅Facebook的博客：https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

现在已经变得非常容易了。您只需要将代理字段添加到您的package.json中即可。例如 -

"proxy": "http://localhost:4000",

- Nick Brady