Cross-Origin Request Blocked with React and Express

Question

So I hit this error, when I was trying to send data to the back end using React. From what I learnt I need to allow the communication on the back-end and in the .htacc

Answer 1

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