How to set up a proxy in React JS

What is PROXY?

In computer networking, a proxy server is a server application that acts as an intermediary between a client requesting a resource and the server providing that resource.

Cross-Origin Resource Sharing (CORS) Policies

A CORS policy specifies the settings that can be applied to resources to allow Cross-Origin Resource Sharing.

CORS is a mechanism that uses an additional HTTP header to inform a browser to allow a web application running at one origin (domain) to have permission to access selected resources from a server at a different origin.

How to set up a Proxy and fix the CORS issue?

To setup up, the proxy for React JS is extremely easy and is not need so many things to do. You just need to follow the 3 steps and will be working fine.

1. First, install?http-proxy-middleware?using npm or Yarn
2. Next, create?src/setupProxy.js.

Example:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {

app.use(

'/api',

createProxyMiddleware({

target: 'https://localhost:5000',

changeOrigin: true,

})

);

};

1. You can now register proxies as you wish!

More info you can find here, with examples: PROXY example