Fix CORS Error (JavaScript)

What is CORS?

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources - MDN

This definition might seem confusing so let me try to explain it in simpler terms.

CORS is a browser policy that allows you to make requests from one website to another which by default is not allowed by another browser policy called Same Origin Policy.

This is an error that is mostly addressed from the backend of an API.
The problem here is when you are trying to call a public API without the CORS error being fixed and you can't reach the developers that developed the API.

In this tutorial, I'll be showing you how to by-pass CORS errors using Vanilla Javascript when you are in such a situation.

The API we are going to be using is a Quote Generator API.

http://api.forismatic.com/api/1.0/

In other to get list of Quotes, we need to append this to the base URL

?method=getQuote&lang=en&format=json.

So the full URL becomes;

http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json

In other to make the API call, we need to create a Javascript file and call the endpoint.We would be using the fetch API.

This would look like this;

// Get quote from API
async function getQuote() {
  const apiUrl = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json';
  try {
     const response = await fetch(apiUrl);
     const data = await response.json();
     console.log({data});
  } catch (error) {
     console.log(error);
      }
  }
// On load
getQuote();

If you run this code in your browser and open up your console, you should see the error below;

In other to fix this error, add the following lines of code;

// Get quote from API
async function getQuote() {
  const proxyUrl = 'https://cors-anywhere.herokuapp.com/' -> this line;
  const apiUrl = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json';
try {

     const response = await fetch(proxyUrl + apiUrl) -> this line;
     const data = await response.json();
     console.log({data});
  } catch (error) {
     console.log(error);
      }
  }
// On load
getQuote();

This URL https://cors-anywhere.herokuapp.com/ is also a public API that was created by someone to fix the CORS error.

N.B: You might still get some errors on your console even after following the steps I just showed.If this happens, go to this URL

   `https://cors-anywhere.herokuapp.com/corsdemo`

and follow the instructions there.

Thanks for taking your time to read this Article. Your feedback and comment is highly welcomed.

Comments

[NavidNourani]

Thanks a lot <3

[deexter]

Fetch has no cors option, anyway you should not do this.

[cigwe416]

Yes you are right. This is just for development environment

[cindycc21]

this doesn't work anymore (cors-anywhere.herokuapp.com) - is there another way to do this?

[wanmaoor]

But what if I got to shift into production mode, I have to get rid of all of proxyUrl wherever ?😫😫😫😫

[cigwe416]

It's not about a security issue. It's so that you won't be disappointed when the server cannot be reached. You are advised to create yours so you can effectively manage it.

[Ande Caleb]

9aice one Nonso... real nice...