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)
  });
}

Solution

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);
});

1. Make sure you enabled cross domain access form your server side.... & not getting any error related to that.

2. 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

Comments

[curv]

What's the error?

[curv]

Also your Ajax call should go into the componentDidMount method if possible

[madalinivascu]

i think he has a CORS problem

[gijoe]

@zinc, I just changed it to there. Pardon my questions as a beginner, why should I place Ajax calls in componentDidMount?

[gijoe]

Wow that is great! where did you get the postman-token from? thanks

[gijoe]

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?