DEV Community

loading...

Fix CORS Error (JavaScript)

cigwe416 profile image cigwe416 ・2 min read

What is CORS?

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();
Enter fullscreen mode Exit fullscreen mode

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

Screen Shot 2021-03-04 at 6.39.46 PM

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();
Enter fullscreen mode Exit fullscreen mode

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`
Enter fullscreen mode Exit fullscreen mode

and follow the instructions there.

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

Discussion (4)

pic
Editor guide
Collapse
deexter profile image
deexter

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

Collapse
cigwe416 profile image
cigwe416 Author • Edited

Yes you are right. This is just for development environment

Collapse
wanmaoor profile image
wanmaoor

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

Collapse
cigwe416 profile image
cigwe416 Author

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.