React fetch，“凭证:包含"，中断了我的整个请求，并且出现错误 [英] React fetch, “credentials: include”, breaks my entire request and I get an error

问题描述

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

I'm doing a fetch request in React to my Node.js server.

每当我不包含凭据:"include" 时，在我的提取请求中，该请求就会成功发送给服务器并返回给客户端.

Whenever I do NOT include credentials: "include" and in my fetch request, the request is successfully made to the server and returned to the client.

但是，当我确实包含凭据:"include" 时，如下所示:

However, when I do include credentials: "include", like the below:

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',
    })

}) ....

我收到此飞行前错误:

登录名:1通过CORS策略阻止从原点"http://localhost:3000"访问"http://localhost:8000/"处的访存:对预检请求的响应未完成"t通过访问控制检查:当请求的凭据模式为包括"时，响应中"Access-Control-Allow-Origin"标头的值不得为通配符"*".

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'.

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

1. 我认为很明显为什么我需要包含"headers"，我使用的是cors，如果不包含'Access-Control-Allow-Origin':'http://localhost:3000/'，则服务器将不接受该请求.
2. 我为什么需要包括凭据"?如果没有它就行吗?因为如果我不包括凭证"，虽然提取请求正确执行，但是除非我包含凭据:"include" ，否则会话cookie不会从我的客户端发送到服务器.如果我删除所有标头并包含 mode:'no-cors'，则将执行获取请求，并将会话cookie发送到服务器，但是显然我得到了一个不透明的响应，我需要无论如何都要使用cors.

1. I think it's obvious why I need to include the "headers", I'm using cors and if I don't include 'Access-Control-Allow-Origin':'http://localhost:3000/' then the server will not accept the request.
2. Why do I need to include the "credentials" if it works without it? Because if I do not include "credentials" while the fetch request executes correctly, the session cookie will not be sent to the server from my client UNLESS I include credentials: "include". If I delete all the headers and include mode: 'no-cors', then the fetch request executes and the session cookie is sent to the server, but obviously I get an opaque response, and I need to be using cors anyways.

尝试:

---

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

Attempts:

---

There are a lot of stack overflow questions SIMILAR to this, but not exact, thus their solutions don't work.

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

Here are some things I have tried that didn't work:

1. 这已经在我的服务器上，但是有人建议在客户端尝试它，所以我这样做了:'Access-Control-Request-Method':'GET，POST，DELETE，PUT，OPTIONS'，

'Access-Control-Allow-Credentials':'true'，

'withCredentials':'true'，

来源:"http://localhost:3000/auth"，

crossorigin:true，

是的，我已经建立了一个代理(有助于解决先前的问题)，例如:"proxy":"http://localhost:8000"

And yes, I've already set up a proxy (which helped solve a prior issue) as such: "proxy": "http://localhost:8000"

我已经尝试了更多其他解决方案，但没有成功，我可以肯定地说，我读过(如果不是全部)与该问题有关的所有问题中的绝大多数以及相应的答案.我的服务器设置正确，这就是为什么我没有包含任何代码的原因.

I've tried many more other solutions to no avail, I'm certain I've read, if not all, the vast majority of all questions relating to do with this issue and the corresponding answers. My server is setup correctly, which is why I didn't include any code from it.

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

In an ideal world I wouldn't need to use credentials: "include" for the session cookie to be sent back to my server, but that is the cause of another solution I had to implement.

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

If anyone could help me, I would be very grateful.

每当我不包含凭据:"include" ，但没有通过会话cookie时，我的预检请求便会通过.

My preflight request does pass whenever I do NOT include credentials: "include", but the session cookie is not passed.

当我确实包含凭据:"include" 和 mode:"no-cors" 时，会通过会话cookie，但是，我收到了不透明的响应，并且需要使用cors.

The session cookie is passed when I do include credentials: "include" and mode: 'no-cors', however, I receive an opaque response and I need to use cors.

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

Finally, when I combine the two (cors and credentials), I my preflight request fails with the below error:

登录名:1 CORS策略已阻止从原点"http://localhost:3000"获取"http://localhost:8000/"处的访问:对预检请求的响应未通过访问控件检查:当请求的凭据模式为包括"时，响应中访问控制允许-来源"标头的值不得为通配符"*".

推荐答案

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

this most likely comes from your server. Do you have cors npm package installed in the backend ?

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

您还需要对其进行配置.

You will need ton configure it aswell.

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

Most likely in your index.js file.

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通信.

This has to be set before any route. Origin can be an array of whitelisted (allowed) domains to communicate with your backend api.

这篇关于React fetch，“凭证:包含"，中断了我的整个请求，并且出现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！