This is a common issue occurs when you try to call an endpoint via your react app because react app is running on localhost:3000 and apis are on different servers.
to rectify this error install 'http-proxy-middleware'
npm i http-proxy-middleware
or
yarn add http-proxy-middleware
after installation create a ***setupProxy.js*** in your ***src*** folder
and follow below code
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/getDetails', //this is your api
createProxyMiddleware({
target:'http://10.0.0.20:9000/getDetails', //this is your whole endpoint link
changeOrigin: true,
})
);
app.use(
'/getproducts', //this is your api
createProxyMiddleware({
target:'http://10.0.0.20:9000/getproducts', //this is your whole endpoint link
changeOrigin: true,
})
);
};
you can add as many api as you want in app.use.
and then just normally call the api
axios.get('http://10.0.0.20:9680/getDetails')
for more details check below link
[Porxying API requests in Development in React JS][1]
[1]:
[To see links please register here]