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: 
Fix Without Using External Proxy or Chrome Extension
----------------------------------------------------

CORS should be enable in server side! if you can not activate it on server (for example using external API) create a middleware `React -> Middleware -> Orginal Server`.

1. Create a Node.js project (Middleware) and use below code in `app.js`.

```
const express = require("express");
var cors = require('cors')
const app = express();
app.use(cors());
const { createProxyMiddleware } = require('http-proxy-middleware');
app.use('/api', createProxyMiddleware({ 
    target: 'http://localhost:8080/', //original url
    changeOrigin: true, 
    //secure: false,
    onProxyRes: function (proxyRes, req, res) {
       proxyRes.headers['Access-Control-Allow-Origin'] = '*';
    }
}));
app.listen(5000);

```

This will pass the request `http://localhost:5000/api/xxx` to original server (for example `http://localhost:8080/api/xxx`), and returns the result to client.

2. Change client (React) to call proxy and get data without CORS error (you only need to change the port in url):

```
axios.get('http://localhost:5000/api/xxx', //proxy uri
{
   headers: {
      authorization: ' xxxxxxxxxx' ,
      'Content-Type': 'application/json'
   } 
}).then(function (response) {
   console.log(response);
});

```
3. run node project `node app.js` and react project `npm start`.
Add proxy to package.json file and keep the remaining part of url in the fetch itself.

eg.,

In package.json file,
"proxy" : "https://www.google.com", //add your own website link

In App.js file
const response = await fetch(./...(as per your own))