No ‘Access-Control-Allow-Origin’ header is present on the requested resource when fetching API

It’s always been blocked sometimes when did not match the HTML request policy.

When I am fetching data with API, something wrong happened again and again. Here is how I fixed it in four ways quickly.

original fetching:

When the first several time executes, it works and somehow it pops up the access error.

Why does this happen?

when the user sends the request to API, the server feels like not safe to send data back to the client not qualified. The origin should be the site trusted which should declare in the header.

Get to know more about Access-control-allow-origin.

So I try to use a proxy to fix it first.

1. The first proxy popular is https://cors-anywhere.herokuapp.com/

And something wrong happens again later. And response slow with this proxy.

GET https://cors-anywhere.herokuapp.com/https://randomuser.me/api/ 429 (Too Many Requests)

This is the error 429 too many requests.

It seems like this is the problem of cors-anywhere.herokuapp.com

2.Then I try to abandon it to try another one https://api.allorigins.win/raw?url=

And it works and faster than herokuapp one.

If you’d like to try this proxy here

3.Another way is setting the fetch mode:

When you browsing the MDN about using fetch, it’s clear to explain the setting.

// Example POST method implementation:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); // JSON data parsed by `data.json()` call
  });

The expected CORS header on the node:

res.setHeader('Access-Control-Allow-Origin', 'whatever.com:9000');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Credentials', true); // you probably dont want this one unless there is auth/cookies involved
res.setHeader('Access-Control-Allow-Methods', 'GET,PATCH,POST,PUT,DELETE');

another related article in the freecodecamp

4.Another chrome way :

there are options in google extension about it, such as cross domain-cors and allow cors:access-control-allow-origin.

Just by adding to chrome, it’s easier to control which site you want to allow it.

And also can build your own proxy to fix it, but I’ll just skip it here.

👉Follow me for more useful web development content! love sharing🥰