title: How to add Cross Origin Resource Sharing request headers?
body: <p>I am building a REST-consumer using React JS, I have build a REST api as the backend service the frontend will be a completly different application. To sepparate the frontend from the backend. </p>
  
  <p>What I am currently struggling with is making a cross origin request from the frontend to the backend. The backend is hosted at <em><a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a></em> and the frontend react app is hosted at <em><a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a></em>. When making a request I get the following error on the console: </p>
  
  <blockquote>
    <p>Failed to load <a href="http://localhost:8080/api/something" rel="nofollow noreferrer">http://localhost:8080/api/something</a>: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' 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.</p>
  </blockquote>
  
  <p>Right now I have fixed this error with a chrome extension to allow CORS: <a href="https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en" rel="nofollow noreferrer">https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en</a> </p>
  
  <p>But this is just a temporary sollution, I have tried adding the <code>Access-Control-Allow-Origin</code> header but that does not seem to work. </p>
  
  <p>This my code used to make the request: </p>
  
  <pre><code>let Myheaders = new Headers()
  Myheaders.append("Access-Control-Allow-Origin", "http://localhost:8080/")
  
  let res = await fetch("http://localhost:8080/api/something", 
  {
      method: "get", 
      mode: "cors",
      headers: Myheaders
  })
  let res1 = await res.json()
  </code></pre>
  
  <p>I have tried adding multiple values for the <em>Access-Control-Allow-Origin</em> header with <em>backslash</em> or without <em>backslash</em>, but nothing seems to work. </p>
  
  <p>Anyone run into the same issues and have a sollution for it?</p>