title: How to link express proxy to react in order to resolve CORS header error?
body: <p>I'm getting the following error when trying to call a third-paty API through React:</p>
  <p><strong>Access to XMLHttpRequest at 'https://superheroapi.com/api/apikey/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.</strong></p>
  <p>The API is <a href="http://www.superheroapi.com/api" rel="nofollow noreferrer">www.superheroapi.com/api</a></p>
  <p>The ideal solution I found was to create a proxy server with Express to call the API from there.
  Since I have zero background in back-end dev, I'm struggling to make it work. Here's how far I have progressed, but it is still showing the error and not calling the API.</p>
  <p>This is my server.js</p>
  <pre><code>const express = require(&quot;express&quot;)
  const app = express()
  const cors = require(&quot;cors&quot;)
  const { default: axios } = require(&quot;axios&quot;)
  
  app.use(cors())
  
  app.get(&quot;/&quot;,() =&gt; {
        response = await axios.request(&quot;https://superheroapi.com/api/apikey&quot;)
       .then((response)=&gt;{
           console.log(response);
       }
       )
      })
  
  app.listen((3001), ()=&gt;{
      console.log(&quot;express on port 3001&quot;);
  })
  </code></pre>
  <p>this is my App.js</p>
  <pre><code>import './App.css';
  import axios from 'axios';
  
  
  function App() {
  
  const getAPI =  {
    method: &quot;GET&quot;,
    url: &quot;https://superheroapi.com/api/apikey/&quot;,
  }
  
  axios.request(getAPI)
  .then((response) =&gt; {
      console.log(response);
  })
  .catch((error) =&gt; {
      console.error(error);
  });
  
  
    return (
      &lt;&gt;
      &lt;h1&gt;hello world&lt;/h1&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>