Question: I'm running into an issue with my isomorphic JavaScript app using React and Express. 

I am trying to make an HTTP request with axios.get when my component mounts

```
componentDidMount() {
  const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
  axios.get(url).then( res => {
    //use res to update current state
  })
}

```

I am getting a status 200 res from the API, but I am not getting any response data and getting an error in my console

```
XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

```

However, if I make the request in my server.js

```
const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then(res => {
    //console.log(res);
});

```

It works fine and I get response data when the server starts. Is this an issue with the actual API or am I doing something wrong? If this was a CORS issue I'm guessing the request in server.js wouldn't work either? Thanks!

Answer: 
```
        //install cors using terminal/command  
        $ npm install cors

        //If your using express in your node server just add
        var cors = require('cors');
        app.use(cors())

       //and re-run the server, your problem is rectified][1]][1]
       **If you won't be understood then see below image**

```

<https://i.stack.imgur.com/Qeqmc.png>
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](https://create-react-app.dev/docs/proxying-api-requests-in-development)