Unable to make api calls from React Single Page ap

Question

I am using react-slingshot boilerplate and my component(which is making api call) is mounted on Root Component. I am using BrowserRouter from navigation.

When I am making call from / path , api is working fine. but When i am making from any other route, I am getting this error.

Failed to load https://myapiserver.com/user/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I dont know what is the problem.

Answer 1

What's your server? This is a CORS thing, so you can server all this up from a web server, like http-server.

You have nothing to do here.Check this doc from MDN.

You need to add header to your web server's response. For example, see the following:

 <add name="Access-Control-Allow-Origin" value="*" />  
 <add name="Access-Control-Allow-Headers" value="Content-Type" />  
 <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

Change the above according to your syntax.