React fetch“凭证：包含”中断了我的整个请求，并显示错误消息

如何解决React fetch“凭证：包含”中断了我的整个请求，并显示错误消息

摘要：

我正在对React.Node.js服务器执行提取请求。

每当我不包含credentials: "include"并且在我的提取请求中，请求都会成功发送到服务器并返回给客户端。

但是，当我包含credentials: "include"时，如下所示：

fetch('http://localhost:8000/',{   method: "GET",'credentials': 'include',headers: new Headers({
            'Accept': 'application/json','Access-Control-Allow-Origin':'http://localhost:3000/','Content-Type': 'application/json',})

}) ....

我收到此飞行前错误：

login:1 Access to fetch at 'http://localhost:8000/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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'.

上下文：

我为什么需要包括其中两个？

我认为很明显为什么我需要包含“标头”，我使用的是cors，如果不包含'Access-Control-Allow-Origin':'http://localhost:3000/'，那么服务器将不会接受请求。
如果没有它，为什么我需要包含“凭据”？因为如果在正确执行获取请求的过程中如果我不包括“凭据”，那么除非包含credentials: "include"，否则会话cookie不会从我的客户端发送到服务器。如果删除所有标头并包含mode: 'no-cors'，则将执行获取请求，并将会话cookie发送到服务器，但是显然我得到了不透明的响应，无论如何我都需要使用cors。

尝试：

对此有很多堆栈溢出问题，类似，但不完全准确，因此它们的解决方案不起作用。

以下是我尝试过的一些无效的方法：

这已经在我的服务器上，但是有人建议在客户端尝试它，所以我这样做了：'Access-Control-Request-Method': 'GET,POST,DELETE,PUT,OPTIONS',
'Access-Control-Allow-Credentials': 'true',
'withCredentials': 'true',
Origin: 'http://localhost:3000/auth',
crossorigin: true,
是的，我已经建立了一个代理（有助于解决先前的问题），例如："proxy": "http://localhost:8000"
我尝试了更多其他解决方案，但没有成功，我可以肯定地说，我读过（如果不是全部）与该问题有关的所有问题中的绝大多数以及相应的答案。我的服务器设置正确，这就是为什么我没有包含任何代码的原因。

在理想情况下，我不需要使用credentials: "include"来将会话cookie发送回我的服务器，但这就是我不得不实施另一种解决方案的原因。

如果有人能帮助我，我将非常感激。

TLDR：

只要我不包括credentials: "include"，但未通过会话cookie，我的预检请求就会通过。

当我包含credentials: "include"和mode: 'no-cors'时，会通过会话cookie，但是，我收到的响应不透明，需要使用cors。

最后，当我将两者（cors和凭据）结合在一起时，我的飞行前请求失败，并出现以下错误：

解决方法

这很可能来自您的服务器。后端是否安装了cors npm软件包？

https://www.npmjs.com/package/cors

您还需要进行配置。

最有可能出现在index.js文件中。

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

app.use(cors({
  origin : http://localhost:3000 (Whatever your frontend url is) 
  credentials: true,// <= Accept credentials (cookies) sent by the client
})

app.use("/api/whatever/the/endpoint",yourRouter);

必须在任何路线之前设置此项。 Origin可以是一组列入白名单（允许）的域，用于与您的后端api通信。

如果您要接受来自多个不同域的请求，也可以执行以下操作：

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

如此处所述：https://www.zigpoll.com/blog/cors-with-express-and-fetch

此处的正确解释是服务器在响应中发回了标头 Access-Control-Allow-Origin: *（如错误消息中所述）。

没有凭据这是可以接受的。但是，引用 Mozilla CORS documentation，

响应凭据请求时，服务器必须在 Access-Control-Allow-Origin 标头的值中指定来源，而不是指定“*”通配符。

此外，如果您已经使用 npm cors module 来处理设置响应标头，请注意

默认配置相当于：

{
  "origin": "*","methods": "GET,HEAD,PUT,PATCH,POST,DELETE","preflightContinue": false,"optionsSuccessStatus": 204
}

所以你必须明确配置它。这就是 @yeeeehaw's answer 起作用的原因 - 他们建议明确设置 origin 选项，这会转化为在幕后设置 Access-Control-Allow-Origin。

请注意，作为替代解决方案，您可以将 reflect the request's origin back 作为其值，而不是显式设置 origin（即 Access-Control-Allow-Origin）。 cors 中间件通过其配置方便地提供了这一点。

Boolean - 将 origin 设置为 true 以反映请求来源，如 req.header('Origin') 所定义，或将其设置为 false 以禁用 CORS。

origin: true

在 Stack Overflow 上 here 和反向代理级别 here（对于 NGINX）也描述了这一点。也许最相似的问题是here。

React fetch“凭证：包含”中断了我的整个请求，并显示错误消息

如何解决React fetch“凭证：包含”中断了我的整个请求，并显示错误消息

摘要：

上下文：

尝试：

TLDR：

解决方法

相关推荐