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

YvonneDev
3 min readDec 14, 2020
Photo by Jonathan Cooper on Unsplash

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

--

--

YvonneDev
YvonneDev

Written by YvonneDev

❤️Front-end Web Development self-taught *share what I learned*

No responses yet