API Integration Cross Origin Issue in React JS.

manpreet Best Answer 2 years ago

I am creating a PWA(Progressive Web Application) using https://forum.tuteehub.com/tag/react">react js.I am calling a login api from http://expgnx.com/api/v1 on http://localhost:3000.It is throwing the following error-

" No 'Access-Control-Allow-Origin' header is https://forum.tuteehub.com/tag/present">present on requested resource. Origin 'http://localhost:3000' is therefore not allowed access.".

Please help me out it stuck to me.

manpreet 2 years ago

You can't access api as public on different origin, port or protocol.The api you are accessing">accessing using having secure protocol, different origin 'expqnx.com' and you are accessing">accessing it on 'http://localhost:3000' using different protocol and origin so as per browser security rules policy you can't do so.

To resolve this issue

1)Go to the source where your api is running

2)open api code and 

3)mention the following headers in your api:

  if your api in node:

res.header ("Access-Control-Allow-origin", "*");

res.header(

"Access-Control-Allow-Headers",

"Origin, X-Requested-With, Content-Type, Accept, Authorization"

The above i am giving the code snipped for api written in node.

You can set 'Access-Control-Allow-Origin' and 'Access-Control-Allow-Headers':'Origin' for your api written in any language.