Consuming API with Authorization Header

Question

I'm having quite a problem working with an API. I'm trying to lean the basics of requesting data.

The url for the test API is aq-test.000webhostapp.com/v1/ which returns a simple 'hello world', that works without problem.

Making a GET request to aq-test.000webhostapp.com/v1/users returns all users created (There's only one). This API PHP server has an authenticate function that checks if the header has an Authorization token whenever I make a request from it:

$headers = apache_request_headers();
$response = array();
$app = \Slim\Slim::getInstance();

// Verifying Authorization Header
if (isset($headers['Authorization'])) {

    // get the api key
    $token = $headers['Authorization'];

    // validating api key
    if (!($token == API_KEY)) { //Do Stuff}

My problem is, that I'm sending the header with the Autorization token, but it simply won't work. This is my code:

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://aq-test.000webhostapp.com/v1/users",
  "method": "GET",
  "headers": {
    'Content-Type' : 'application/x-www-form-urlencoded',
    'Authorization': '3d524a53c110e4c22463b10ed32cef9d'
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

No matter what I do, I always get bad requests. I even did it using AngularJS' $http.get sending the headers, but it didn't work.

It's strange, but if I use PostMan to make the request, ( PostMan file https://www.dropbox.com/s/3ms71lbnu1jb4wj/api_test.postman_collection?dl=0 ) it works flawlessly. In fact, my code is based in PostMan's request! What am I doing wrong here?

Hope you guys can enlighten me, because I´m clueless atm.

What do you mean by "bad requests"? Is it an apache error, a php error, is an error that you get on your REST client? Also if you could clarify what technologies (softwares) you are using. — Juan Javier Triff Cabanas, Aug 08 '18 at 13:48
Do you see the "header" being set in the browser dev tools? That will help narrow down where the problem could be — dubes, Aug 08 '18 at 13:49
also as a side note, if you are learning the basics, might I recommend looking at `fetch` or `axios`. Fetch is going to be the next standard (AFAIR), https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API and may be beneficial to learn that. — dubes, Aug 08 '18 at 13:52
Possible duplicate of [AJAX in Chrome sending OPTIONS instead of GET/POST/PUT/DELETE?](https://stackoverflow.com/questions/21783079/ajax-in-chrome-sending-options-instead-of-get-post-put-delete) — Vladu Ionut, Aug 08 '18 at 14:04
take a look here https://stackoverflow.com/questions/21783079/ajax-in-chrome-sending-options-instead-of-get-post-put-delete — Vladu Ionut, Aug 08 '18 at 14:04
@JuanJavierTriffCabanas I dunno what type of error it is, but it works flawlessly in postMan. This is what the console spits OPTIONS aq-test.000webhostapp.com/v1/users 0 () — Klaha, Aug 08 '18 at 14:06

score 0 · Answer 1 · answered Aug 08 '18 at 13:48

You can try this:

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://aq-test.000webhostapp.com/v1/users",
  "method": "GET",
  "headers": {
    'Content-Type' : 'application/x-www-form-urlencoded',
  },
  beforeSend: function (xhr) {
     xhr.setRequestHeader ("Authorization", "3d524a53c110e4c22463b10ed32cef9d")
  },
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

This is going to add an "Authorization" header to the json request

Didn't work :( console shows this: OPTIONS http://aq-test.000webhostapp.com/v1/users 0 () — Klaha, Aug 08 '18 at 14:01

score 0 · Answer 2 · answered Aug 08 '18 at 14:18

0

You got an error related to OPTIONS request. It's a problem with same-origin policy. The browser is preflighting the request to look for CORS headers. If the request is acceptable, it will then send the real request.

To fix it allow cross domain on backend and this will solve this problem.

answered Aug 08 '18 at 14:18

Vladu Ionut

8,075
1
19
30

Backend has already enabled Cross-Domain: header("Access-Control-Allow-Origin: null"); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS'); header("Access-Control-Allow-Headers: X-Requested-With"); header('Content-Type: text/html; charset=utf-8'); header('P3P: CP="IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA"'); – Klaha Aug 08 '18 at 14:20
Add "*" wildcard instead of null – Vladu Ionut Aug 08 '18 at 14:23
header("Access-Control-Allow-Origin: *"); – Vladu Ionut Aug 08 '18 at 14:24
Changed to header("Access-Control-Allow-Origin: *"); still the same! – Klaha Aug 08 '18 at 14:25

Consuming API with Authorization Header

2 Answers2