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 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
– Alex W, Commented Mar 6, 2018 at 0:11
Вадим Джамиев posted an Answer 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" — Scratte
– Scratte, Commented Jan 4, 2021 at 22:00

Taylor Briggs · Accepted Answer · 2018-03-06 00:15:13Z

3

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!

answered Mar 6, 2018 at 0:15

Taylor Briggs

313 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ariel Solano Over a year ago

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?

Alex W · Accepted Answer · 2018-03-06 01:03:09Z

0

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.

answered Mar 6, 2018 at 1:03

Alex W

38.5k13 gold badges114 silver badges115 bronze badges

1 Comment

Ariel Solano Over a year ago

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!

Collectives™ on Stack Overflow

Using Authorization Header in Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related