How to fix CORS error with credentials: include?

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/

There is a little contradiction in your question. You have mentioned that the Response header has a valid value in `Access-Control-Allow-Credentials`, but the error message says the value is response is ''. Which one is right ? — Panther, Jul 25 '19 at 16:41
Can you add Access-Control-Allow-Credentials=true to your backend app? — Pedro Caseiro, Jul 25 '19 at 16:42
@Panther, request headers has a valid Access-Control-Allow-Credentials, but i dont know how to add this in response headers — Max, Jul 25 '19 at 16:45
Adding that header to the request makes no sense - the requestor doesn't get to make the decision about what is allowed. Otherwise what would be the point of having the restriction? You'll need to find out how to add such a header in your particular server / programming language / framework. If you provide details about that here, we could potentially help you with it — ADyson, Jul 25 '19 at 16:56

score 2 · Accepted Answer · answered Jul 25 '19 at 17:07

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

ThanhPhanLe · Answer 2 · 2019-07-25T17:22:02.623

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

score 0 · Answer 3 · answered Jul 25 '19 at 17:15

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",

How to fix CORS error with credentials: include?

3 Answers3

Linked