title: How do you send a cross origin request from localhost?
body: <p>I have my front end running on localhost:8080 and my server on localhost:3000. I'd like to send a request from my front end to the server. When I do, I get the following error:</p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at 'localhost:3000/create-sharable-url' from
    origin '<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a>' has been blocked by CORS policy: Cross
    origin requests are only supported for protocol schemes: http, data,
    chrome, chrome-extension, https.</p>
  </blockquote>
  
  <p>I am using the http protocol, so why would I get this error?</p>
  
  <p><s>I'm trying to make the request from the <code>localhost</code> protocol, so that error makes me think that it just isn't possible to do. But on the other hand, sending a request from your client to your server in development mode seems like an incredibly common requirement.</s></p>
  
  <p>Googling around seems to point me in the direction of getting the CORS headers set on the response. I already am setting the headers on my server (using the <a href="https://www.npmjs.com/package/cors" rel="nofollow noreferrer">cors</a> npm package), but I figured I'd give it a go anyway. It didn't work for me though. The <a href="https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en" rel="nofollow noreferrer">Access-Control-Allow-Origin: *</a> Chrome extension didn't work, nor did running Chrome with the disable web security flag.</p>
  
  <p><strong>Client JS</strong></p>
  
  <pre><code>createSharableEquityCalculatorURL: function (storeState) {
    let data = this._constructEquityCalculatorData(storeState);
  
    return Vue.axios.post(`${process.env.BASE_API_URL}/create-sharable-url`, data);
  },
  </code></pre>