How to work with two different APIs with React?

In package.json, you can configure the proxy server to make API requests to different targets based on maching the pattern for different API requests in the way it is shown as follows.

Things to note:

• Order of the API patterns matters, the generic request(*) must be last.
• The regex should be such that it matches the complete url, a partial match resulted in errors for me.

The following piece of code worked for me. There are 3 different servers, one for the reports request, one for the access control request, and rest all requests should go to the third server.

"proxy": {    "/report/.*(_get)": {      "target": "http://localhost:8093/"    },    "/access/.*(_get)": {      "target": "http://localhost:8091/"    },    "/.*": {      "target": "https://egov-micro-dev.egovernments.org/",      "changeOrigin": true    }  },

Hope this helps.

I found the solution adding the second proxy after the first one, inside the proxy and it was not necessary for me too put headers inside package.json, but the links shared by @Chase DeAnda are really interesting, and can help who is interested:Webpack headers and axios interceptors.