AJAX Jquery 调用返回 401（未经授权）- API 调用

Question

所以我正在为这个 API 创建一个 GET 请求： https ://immense-depths-6983.herokuapp.com/search/。

要在浏览器中测试的示例 URL 是： https ://immense-depths-6983.herokuapp.com/search?search=94305

用户名为“admin”，密码为“password”。

在浏览器中运行示例 URL 会弹出一个要求进行身份验证的弹出窗口，正确输入后，我会得到一个 JSON 响应文本。

但是，当我在代码上运行它时，它不起作用。我在网上搜索了答案，但每个解决方案都不起作用。我试过 admin:password@url，在 GET 请求中将用户名和密码作为数据参数传递，甚至使用 BTOA 哈希将其传递给 Web 服务器。可惜没有结果。我附上了我现在正在使用的代码 - 希望有好心人可以帮助我解决这个问题。

我的错误（编辑 1）：

- - - - -代码 - - - - - - -

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

原文由 AceGravity 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试发送带有用户名和密码的 http 标头 作为 基本身份验证 方法

我在 Jquery ajax 调用上试过这个方法

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. 确保您从服务器端启用了跨域访问……并且没有收到任何与此相关的错误。
2. 在 ajax http 方法中将用户名和密码作为基本身份验证传递。

它对我有用输出：

-[ -{ “id” : 0, “title” : 基础电子学：理科生电子学入门, “author” : Curtis Meyer, “no” : 0, “class” : , “isbn” : 5800066848142 }, -{ “id”：0，“title”：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 },…. …. …

尝试 https://www.base64decode.org 编码和解码

原文由 Helios 发布，翻译遵循 CC BY-SA 3.0 许可协议