CODEWITHSUNDEEP
yelp
Cody
Cody

Reputation: 31

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

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);
 });

Upvotes: 3

Views: 4525

Answers (2)

Andre N
Andre N

Reputation: 1

I had a similar problem with both Google's API as well as Yelp's API.

Access to fetch at
'https://maps.googleapis.com/maps/api/place/nearbysearch/json?keyword=bar&location=30.2849231%2C-97.7366316&radius=5000&key={YOUR_API_KEY}' from origin 'null' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.

I also tried using the cors-anywhere proxy, but simply adding the proxy URL in front didn't work and the proxy sent me an error.

> GET /https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=30.2849231%2C-97.7366316&radius=3000&keyword=bar&key={YOUR_API_KEY} HTTP/1.1
> Host: cors-anywhere.herokuapp.com
>
< HTTP/1.1 400 Header required
< Access-Control-Allow-Origin: *
< Access-Control-Expose-Headers: access-control-allow-origin
<
Missing required request header. Must specify one of: origin,x-requested-with

The CORSAnywhere proxy seems to require two headers to be added as they want to prevent people from using them as an anonymous browser proxy.

The solution seems to be to add either origin or x-requested-with HTTP header as the proxy specified in their HTTP response body.

Here's the JavaScript fetch request that worked for me:

var apiUrl =
    "https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/nearbysearch/json?keyword=" +
    search + "&location=" + latitude + "%2C" + longitude + "&radius=" + radius + "&key=" + myapikeys.google;

fetch(apiUrl, {
  method: "GET",
  headers: {
    Origin: "null",
    Accept: "application/json",
  },
})
  .then(function (response) {
    if (response.ok) {
      console.log(response);
      response.json().then(function (data) {
        console.log(data);
      });
    } else {
      alert("Error: " + response.statusText);
    }
  })
  .catch(function (error) {
    alert("Unable to connect");
  });

Upvotes: 0

Ilan P
Ilan P

Reputation: 1792

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);
    }
 });

Upvotes: 0

Related Questions