如何使用凭证修复CORS错误：包含？

Question

Another question about CORS, I looked through a lot of information, but couldn't do anything. So I will be grateful for the help.

I am sending a fetch request with credentials enabled. What the browser regularly swears on at Access-Control-Allow-Credentials. I tried to configure a proxy, but it also does not work with it. So I need to add Access-Control-Allow-Credentials in response settings on the server. But I don't realize how.
I'm using create-react-app. There is not even a file with the familiar server code

error:

 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'

Response headers:

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

Request headers:

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/

Answer 1

Hi use the following code in your server.js or app.js in node.

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");```

Answer 2

If your backend is using Express, try to add this piece of code below:

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();
});

Another solution, you can use cors module, just basically install it:

npm install cors --save

And add this code in your server:

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

Answer 3

Since you're using create-react-app the easiest thing to do is to use a proxy so that the request looks like it is coming from the same domain and avoid CORS altogether. Assuming your backend server will be on the same host, this is actually closer to production as well.

Webpack has a clean way to do this. See this blog by facebook: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

This has gotten incredibly easy to do now. All you need to do is add a proxy field to your package.json. For example -

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