How do I resolve the CORS error in Yelp API call?

Question

I'm trying to call the Yelp Fusion API using AJAX but I'm getting the following error below. Could someone help me figure out what's going on here?

api.yelp.com/v3/:1 Failed to load resource: the server responded with a status of 403 () index.html:1 Access to XMLHttpRequest at 'https://api.yelp.com/v3/' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here's the code I'm using:

var queryURL = "https://api.yelp.com/v3/";
var apiKey = "my key" 

$.ajax({
    url: queryURL,
    method: "GET",
    headers: {
        "accept": "application/json",
        "Access-Control-Allow-Origin":"*",
        "Authorization": `Bearer ${apiKey}`
     }
 }).then(function(res) {
     var results = res.data
     console.log(results);
 });

Hi @cody, are you sure you can use Yelp API client-side? Because apparently, you are exposing your API credentials and it has to be against their terms. — Haktan Suren, Nov 18 '18 at 04:38
Hi Haktan, I guess better late than never. But I did realize that I couldn't use Yelp on the client-side. Thanks for your help! — Cody, Dec 29 '18 at 05:48

score 0 · Answer 1 · edited Apr 20 '21 at 12:35

Try using the CORSAnywhere proxy, plug your key in the snip below and give it a shot:

// JavaScript Document
var queryURL = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/";
var apiKey = "my key"; 

$.ajax({
    url: queryURL,
    method: "GET",
    headers: {
        "accept": "application/json",
        "x-requested-with": "xmlhttprequest",
        "Access-Control-Allow-Origin":"*",
        "Authorization": `Bearer ${apiKey}`
     },
   success: function(result){
        console.log(result);
    }
 });

How do I resolve the CORS error in Yelp API call?

1 Answers1

Linked