Cross-Origin Request Blocked with React and Express

To anyone else that this may help, I was using axios with withCredentials: true.

On my Express backend, I was simply doing,

app.use(cors())

What fixed it was either removing withCredentials: true from the React frontend or changing my backend to,

app.use(cors({ credentials: true }))

There's a node package called cors which makes it very easy.

$npm install cors

const cors = require('cors')

app.use(cors())

You don't need any config to allow all.

See the Github repo for more info: https://github.com/expressjs/cors

One reason might be you're using the route as localhost:8000 rather than http://localhost:8000.

USE

http://localhost:8000

DON'T USE

localhost:8000

if you add this header

res.setHeader('Access-Control-Allow-Origin', '*');

you're using credential mode (means you're sending some authentication cookie from your app) and as for CORS specification you cannot use the wildcard * in this mode.

you should change your Access-Control-Allow-Origin header to match the specific host who generated the request

you can change this line:

res.header('Access-Control-Allow-Origin', '*');

to

res.header('Access-Control-Allow-Origin', 'the ip address');

but to be more generic, something like this should work:

res.setHeader('Access-Control-Allow-Origin', req.header('origin') 
|| req.header('x-forwarded-host') || req.header('referer') || req.header('host'));

in addition you have even to allow OPTIONS requests from the browser otherwise you will get a preflight request error.

res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');