Cors error while using ajax request with your local React app

For example, you have a local React app which retrieves data from remote server. Why you try to use a simple fetch request, you will get such an error:

This error is related to Cross-Origin Resource Sharing, when browsers restrict cross-origin HTTP requests initiated from scripts. There are some ways to solve this, like enabling CORS on server, but I would like to show you a much easier and simpler way to solve this and forget about CORS error.

There is a npm project — Local CORS Proxy. It allows you to start a simple proxy to bypass CORS issues.

Getting started

npm install -g local-cors-proxy

This will install proxy globally (with -g parameter). Now, for example, you need to retrieve data from url:

https://www.yourdomain.com/somedata/

Start proxy:

lcp --proxyUrl https://www.yourdomain.com

Then in your client code, new API endpoint:

http://localhost:8010/proxy/somedata

End result will be a request to https//www.yourdomain.com/somedata without any CORS issues.

  •  
  •  
  •  
  •  
  •  
  •