Using Authorization Header in Javascript

Question

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!

When you run this code, do you get data back from the API? If so, you're doing it correctly. The code above looks fine. You're passing `Authorization: bearer [your API bearer token]` as an HTTP header with your request to the server. The server will respond with an error message and HTTP code other than 2xx if there's an issue with your request. [The RFC](https://tools.ietf.org/html/rfc6750) is not what I would call light reading but it should contain everything you need to know about the OAuth bearer token authentication. — Alex W, Mar 06 '18 at 00:11
[Вадим Джамиев](https://stackoverflow.com/users/10859969/Вадим-Джамиев) posted an [Answer](https://stackoverflow.com/a/65570289/12695027) saying "..this is solution for your last problem: [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe)" — Scratte, Jan 04 '21 at 22:00

score 2 · Answer 1 · answered Mar 06 '18 at 00:15

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!

Thanks for your help! I got this message: "Failed to Load: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403." Does this mean I have the wrong key or something? — Ariel Solano, Mar 06 '18 at 00:31

score 0 · Accepted Answer · answered Mar 06 '18 at 01:03

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.

Thanks so much! Again I'm a beginner so I'll need to do some more research to even understand how to do that lol. Thanks for the explanation! — Ariel Solano, Mar 06 '18 at 01:28

Using Authorization Header in Javascript

2 Answers2