title: Request fails due to CORS issue with origin from localhost
body: <p>I have seen dozens of questions on SO and different blogs talking about this with "answers" -- all to no avail.</p>
  
  <p>I have a React.js app on my local machine (Ubuntu 16.04).  Locally, I try to test it by running <code>npm start</code> and it opens up the browser  to <a href="http://localhost:3000" rel="noreferrer">http://localhost:3000</a>.</p>
  
  <p>On one page, I am trying to access my PHP api which is on my shared hosting server.</p>
  
  <p>Chrome and Firefox both say that it fails due to server not having <code>Access-Control-Allow-Orgin</code>.</p>
  
  <p>Exact Message:</p>
  
  <pre><code>Failed to load http://---/api/v1/categories: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost.com:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  localhost.com/:1 Uncaught (in promise) TypeError: Failed to fetch
  </code></pre>
  
  <p>However, upon my php server entry point I do have:</p>
  
  <pre><code>header("Access-Control-Allow-Orgin: *");
  header("Access-Control-Allow-Methods: *");
  </code></pre>
  
  <p>Here is where I make my api call in my react app:</p>
  
  <pre><code> componentDidMount() {
  
    var options = {
      method: 'get',
      headers: {
          "Access-Control-Request-Headers": "*",
          "Access-Control-Request-Method": "*"
      },
    }
  
    // I have since removed the headers from the options as advised in the comments 
    fetch('http://---/api/v1/categories', options)
    .then(results =&gt; {
      return results.json();
    }).then(data =&gt; {
      let categories = data.map((category) =&gt; {
        return(
          // edited out
        )
      })
      this.setState({categories: categories});
    })
   }
  }
  </code></pre>
  
  <p>I have tried this on both Chrome and Firefox; I have also tried to alias my server away from localhost.  I have tried the <code>no-cors</code> approach, which does get me access -- but breaks everything of course.  I have tried with and without passing headers along with my <code>fetch</code> request.</p>
  
  <p><strong>UPDATE</strong>:</p>
  
  <p>I did get it to work by installing <a href="https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en" rel="noreferrer">this Chrome plugin</a>.  I feel this is a workaround and would like to know if there is a coding answer here.</p>