Question

因此，我正在为此API创建GET请求：https://immense-depths-6983.herokuapp.com/search/。

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

用户名为＆＃34; admin＆＃34;密码是＆＃34;密码＆＃34;。

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

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

我的错误（编辑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)
  });
}

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

确保您在服务器端启用跨域访问....＆amp;没有得到任何与此相关的错误。
传递用户名＆amp;密码作为ajax http中的基本身份验证方法

它对我有用输出：

- 〔 - {“id”：0，“title”：基础电子学：理科学生电子学概论，“作者”：柯蒂斯梅耶，“不”：0， “class”：，“isbn”：5800066848142}， - {“id”：0，“title”：用C ++编写抽象，“作者”：Jerry Cain，“no”：0，“class”：CS 106B CS 106X，“isbn”：1}， - {“id”：0，“title”：心灵的机器：大脑和行为的基础，“作者”：Neil Verne Watson，“不”：0，“阶级”：想想， “isbn”：9780878939336}， - {“id”：0，“title”：科学家和工程师的物理学：战略方法，“作者”：Randall D. Knight，“不”：0，“阶级”：物理41，“isbn”：9780321752918}，.... .... ....

尝试使用https://www.base64decode.org进行编码＆amp;解码

Answer 2

要使用CORS发出AJAX请求，需要将服务器配置为接受跨源请求，否则ajax调用将失败。阅读这些文章以了解更多信息：

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

Answer 3

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调用返回401（未授权） - API调用

3 个答案: