CODEWITHSUNDEEP
javascriptjqueryajaxauthorization
Ariel Solano
Ariel Solano

Reputation: 181

Using Authorization Header in Javascript

Im a total noob and I'm just beginning to learn about APIs. I'm trying to use the Yelp API and I cant seem to access it. According to the documentation, I'm supposed to: "Put the API Key in the request header as "Authorization: Bearer " I'm not familiar with Authorizations and Not sure if I'm doing it correctly. Here's what I have

    function displayYelp() {
  var URL =
    "https://api.yelp.com/v3/businesses/search?term=restaurant&latitude=40.82783908257346&longitude=-74.10162448883057";

  $.ajax({
    url: URL,
    method: "GET",
    headers: {
      authorization:
        "bearer //My Key Goes Here",
    },
  }).then(function(response) {
    console.log(response);
  });
}

Even if you can't answer my specific question, Any help on what Authorization means would be greatly appreciated!

Upvotes: 5

Views: 27561

Answers (2)

Alex W
Alex W

Reputation: 38253

I saw your comment that you are having issues with the preflight. The reason the API request is being blocked during preflight is because Yelp isn't sending an Access-Control-Allow-Origin header. Because they don't send this header, you will not be able to make a cross-origin AJAX request.

After searching GitHub, I've found several sources supporting the fact that the Yelp API doesn't support client-side JavaScript because of CORS security issues:

CORS issue Fetch API cannot load https://api.yelp.com #25

Does api.yelp.com support Access-Control-Allow-Origin header for client-side JS? #99

This means you'll need to use a server-side approach to use the API. Disclaimer: I've seen mentions of a JSONP approach but have yet to find a working example.

Upvotes: 0

Taylor Briggs
Taylor Briggs

Reputation: 31

The Authorization header is frequently used to authenticate to an API using a token. You can read more about token authentication here. You might want to try adding an error handler so you can see what the problem is:

$.ajax({
  url: URL,
  method: "GET",
  headers: {
    "Authorization":
      "Bearer //My Key Goes Here",
  },
}).then(function(response) {
  console.log(response);
}).catch(function(err) {
  console.error(err);
});

You may also need to capitalize "Authorization" and "Bearer" in order to have the correct header format. Otherwise, your ajax call looks correct!

Upvotes: 3

Related Questions