title: How to make Fetch API work without enabling CORS in the browser
body: <p>I have been trying to get this code to work in various versions:
  (the url points to the NASA APOD API)</p>
  <pre><code>  try {
      const rsp = await fetch(url, {
        method: 'GET',
        mode: 'cors',
        headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET',
        },
      })
      if (rsp.ok) {
        console.log(`&gt;&gt;&gt; no problem with call to fetch api:`)
        const data = await rsp.json()
        return data
      }
      console.log(`!!! some other problem occurred with call to fetch api:`, rsp)
  
    } catch (err) {
      console.log(`!!! problem with call to fetch api:`, err)
    }
  </code></pre>
  <p>I have been getting this error:
  <a href="https://i.stack.imgur.com/c5pQy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c5pQy.png" alt="enter image description here" /></a></p>
  <p>when I run the code in Chrome. However, when I run the same code in FireFox, I get the expected data returned from the API.</p>
  <p>When I install an extension in Chrome to enable CORS, I get the expected data returned from the API.</p>
  <p><a href="https://i.stack.imgur.com/NPyzd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NPyzd.png" alt="enter image description here" /></a></p>
  <p>When I run the code with the fetch header - 'mode': 'no-cors', I get the following response in Chrome:</p>
  <p><a href="https://i.stack.imgur.com/DebeO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DebeO.png" alt="enter image description here" /></a></p>
  <p>which I can understand to a point because the API is on a different domain (i.e. from NASA). FireFox gives a similar response.</p>
  <p>So, I have reached the point where I can make the code in Chrome by switching on CORS in the browser (by means of browser extension). This is clearly not satisfactory.</p>
  <p>I would appreciate any suggestions on resolving this problem in Chrome that does involve using a browser-level switching on of CORS.</p>
  <p>Many thanks.</p>
  <p>Latest Attempt:</p>
  <p><a href="https://i.stack.imgur.com/U2Ujf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U2Ujf.png" alt="enter image description here" /></a></p>
  <p>this is the NextJS api route.</p>
  <p><a href="https://i.stack.imgur.com/YIHm6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YIHm6.png" alt="enter image description here" /></a></p>
  <p>this is the function using axios to call the api route</p>
  <p><a href="https://i.stack.imgur.com/SZ3ZE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SZ3ZE.png" alt="enter image description here" /></a></p>
  <p>this is error from axios.</p>
  <p>It looks like the proxy is not working, the responseUrl looks like it is coming from local host not the target api address.</p>
  <p>Any ideas please?</p>