Dhruva

This situation applies whenever a front-end web app hosted on different domain compared to backend server, we have to deal with browser’s Same Origin policy or CORS issues. Typically you see this issue in your local environment, where in the front-end web app is served on a different port compared to backend api.

One way to by-pass CORS is via adding proxy to package.json as shown in below code.

Note: Once the above setting is enabled, restart your app and make sure when proxy is enabled, make sure you add relative paths to fetch calls i.e., (fetch(‘api/search’)) vs absolute path.

--

--

Here I will be using ‘history’ from react to navigate to a new page on button click.

I first created my react app using create-react-app and added Navbar component header which contains Home, About, Contact and Product pages.

Currently, the pages look like the below screen shot.

Home page without button to products

For your reference…

--

--