How to Fix react cors error in localhost?

Question

I'm working on a react app. Where I'm requesting for an API by AXIOS. But When I run NPM START to test my app in localhost I'm getting CORS error. Here is the error Access to XMLHttpRequest at 'https://********.com/trx_status.php' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field privatekey is not allowed by Access-Control-Allow-Headers in preflight response.

I'm new in react. Please tell me how can I solve this issue. Thank you...

Solution 1

The error is caused by the custom privatekey header that is send to the server. This field has to be included in the Access-Control-Allow-Headers response header from the server. It can be done using:

Access-Control-Allow-Headers: privatekey

when using php the following snippet can be used:

header('Access-Control-Allow-Headers: X-Requested-With, privatekey');

Solution 2

This seems to me like an issue at your server side. So what you could try doing is to try adding the header "Access-Control-Allow-Origin: *".

It would be helpful if you could post it somewhere in jsfiddle or some editor so we can look at it further.

Thanks

Solution 3

Open package.json file, in directory of your App, then add this line (preferably under "private" line, as you can see in the picture below. This also works for any other url if your back-end is not located on your localhost.

"proxy": "http://localhost:3000/",

Remember to restart your server after this change!

Comments

[MaartenDev]

Possible duplicate of No 'Access-Control-Allow-Origin' - Node / Apache Port Issue

[MaartenDev]

This issue is not related to the origin, is it related to the headers that the client sends.

[Vivek V Nair]

Ah! if so, then it should be just like you have mentioned. Cheers mate!

[MaartenDev]

No worries! Thanks for your contribution!