AJAX Jquery Call returning 401 (unauthorized) - API Call

Question

So I'm creating a GET request to this API: https://immense-depths-6983.herokuapp.com/search/.

A sample URL to test in your browser is: https://immense-depths-6983.herokuapp.com/search?search=94305

The username is "admin" and password is "password".

Running the sample URL in the browser gives me a popup asking for the authentication and upon entering it correctly, I get back a JSON response text.

However, when I run this on code, it doesn't work. I've scoured the web for answers and each solution doesn't work. I've tried admin:password@url, passing in the username and password as data parameters in the GET request, and even using the BTOA hash thing to pass that to the web server. Alas to no results. I've attached my code I'm using right now - hope some good soul can help me out of this problem.

My error (EDIT 1):

---------CODE--------------

render() {
    var url = this.props.url;
    var zip = '94305';
    // var zip = this.props.zip;
    // create the prop type later with built in functionality
    var query = zip + this.props.query;
    var username = "admin";
    var password = "password";
    var ret_data = textbookApi(url, query, username, password);
    console.log("after");

    // if data is null, ignore
    // else
    // this.setState({textbooks: ret_data});

    return (
      <div>

      </div>
    );
  }

}

export default Search;

function makeBaseAuth(user, pswd) { 
  var token = user + ':' + pswd;
  var hash = "";
  if (btoa) {
    hash = btoa(token);
  }
  return "Basic " + hash;
}

function textbookApi(url_link, query, username, password) {
  // console.log("INSIDE");
  console.log(makeBaseAuth(username, password));
  $.ajax({
    type: "GET",
    url: url_link,
    data: {
      'search' : query
    },
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Authorization', makeBaseAuth(username, password));
    },
    success: function(data) {
      console.log("WORKS!!!!!!!!!!!!!!!!!!!!!!!!!");
      console.log(data);
      return data;
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(url_link, status, err.toString());
    }.bind(this)
  });
}

Also your Ajax call should go into the componentDidMount method if possible — curv, Dec 07 '16 at 07:00
@zinc, I just changed it to there. Pardon my questions as a beginner, why should I place Ajax calls in componentDidMount? — AceGravity, Dec 07 '16 at 17:35

Helios · Answer 1 · 2016-12-07T07:10:15.357

Try to send your http header with username and password as Basic Authentication method

I tried this method on Jquery ajax call

var settings = {
      "async": true,
      "crossDomain": true,
      "url": "https://immense-depths-6983.herokuapp.com/search?search=94305",
      "method": "GET",
      "headers": {
        "authorization": "Basic YWRtaW46cGFzc3dvcmQ=",
        "cache-control": "no-cache",
        "postman-token": "54733c33-4918-811b-3987-69d6edeaa3a0"
      }
    }

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

Make sure you enabled cross domain access form your server side.... & not getting any error related to that.
Pass the username & password as basic authentication in ajax http method.

It worked for me Output :

-[ -{ "id" : 0, "title" : Basic Electronics: An Introduction to Electronics for Science Students, "author" : Curtis Meyer, "no" : 0, "class" : , "isbn" : 5800066848142 }, -{ "id" : 0, "title" : Programming Abstractions in C++, "author" : Jerry Cain, "no" : 0, "class" : CS 106B CS 106X, "isbn" : 1 }, -{ "id" : 0, "title" : The Mind's Machine: Foundations of Brain and Behavior, "author" : Neil Verne Watson, "no" : 0, "class" : Think, "isbn" : 9780878939336 }, -{ "id" : 0, "title" : Physics for Scientists and Engineers: A Strategic Approach, "author" : Randall D. Knight, "no" : 0, "class" : Physics 41, "isbn" : 9780321752918 },.... .... ...

Try https://www.base64decode.org to encode & decode

Wow that is great! where did you get the postman-token from? thanks — AceGravity, Dec 07 '16 at 17:29
Also, please look at my edit above (added error log) - I copied your code verbatim and am still getting the same errors...Did you run your code or did you just open the GET url on a browser manually? — AceGravity, Dec 07 '16 at 17:34

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

To make an AJAX request using CORS, the server needs to be configured to accept cross-origin requests, otherwise ajax call will fail. Read these article to know more about it:

https://zinoui.com/blog/cross-domain-ajax-request

Access-Control-Allow-Origin error sending a jQuery Post to Google API's

How to get a cross-origin resource sharing (CORS) post request working

edited May 23 '17 at 12:30

Community

1
1

answered Dec 07 '16 at 07:25

Mayank Shukla

100,735
18
158
142

score 0 · Answer 3 · answered Aug 03 '20 at 10:53

function textbookApi(url_link, query, username, password) {
  // console.log("INSIDE");
  console.log(makeBaseAuth(username, password));
  $.ajax({
    type: "GET",
    url: url_link,
    data: {
      'search' : query
    },
    "error": function(xhr, error, thrown) {
            console.log("Error occurred!");
            console.log(xhr, error, thrown);
        },
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Authorization', makeBaseAuth(username, password));
    },
    success: function(data) {
      console.log("WORKS!!!!!!!!!!!!!!!!!!!!!!!!!");
      console.log(data);
      return data;
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(url_link, status, err.toString());
    }.bind(this)
  });
}

AJAX Jquery Call returning 401 (unauthorized) - API Call

3 Answers3