title: Blocked by CORS policy with a React / ES6 Promise POST request
body: <p>I'm making a POST request to my API but getting returns a '<strong>blocked by CORS policy</strong>' message.</p>
  
  <p>The API is expecting a XML data which I have contained in a XML file which is being imported in to this request in the <strong>exampleAccountSettings</strong> value in the code example below. </p>
  
  <p>The message I'm currently getting being returned from the API is this</p>
  
  <blockquote>
    <p>Access to fetch at '<a href="https://exampleAPI.com/api/settings/import" rel="nofollow noreferrer">https://exampleAPI.com/api/settings/import</a>' from origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.</p>
  </blockquote>
  
  <p>And here's my Promise</p>
  
  <pre><code>    return new Promise((resolve, reject) =&gt; {
        const requestUrl = https://exampleAPI.com/api/settings/import;
        const init = {
          method: 'POST',
          mode: 'cors',
          headers: {
            authorization: localStorage.token,
            "Access-Control-Allow-Origin": "*",
          },
          body: JSON.stringify(exampleAccountSettings)
      };
      return fetch(requestUrl, init).then((response) =&gt; {
        log.debug('importAccountSettings(): response:', response);
      })
    });
  </code></pre>
  
  <p>All I've seen similar to this question state I need to add something like <strong>"Access-Control-Allow-Origin": "*"</strong> to specify that access is allowed but this seems to have no effect.</p>
  
  <p>So is there a different approach for ES6 / React or maybe it's something I have misunderstood? Any advice welcome or if someone can point me in the direction of some research I'd be very appreciative!</p>