javascript - 如何使用 AJAX 进行正确的 jQuery 用户身份验证

标签 javascript jquery ajax curl

我被一个简单的练习所困扰。我有一个需要用户身份验证的 REST api 服务器。 cURL 命令显示它正在工作:

curl -k --user tyrion@yahoo.ca:Lannister https://miramar21.com/tut_server/default/api/verify/person/james.bond@outlook.com/Prometheus

要从 jQuery 执行此操作,应该很简单:

$.ajax
({
  type: "GET",
  url: "https://miramar21.com/tut_server/default/api/verify/person/james.bond@outlook.com/Prometheus",
  dataType: 'json',
  async: false,
  headers: {
    "Authorization": "Basic " + btoa("tyrion@yahoo.ca:Lannister")
  },
  success: function (dta){
    alert(JSON.stringify(dta));
  }
});

但是,我收到此错误:

选项https://miramar21.com/tut_server/default/api/verify/person/james.bond@outlook.com/Prometheus 400(错误请求)

XMLHttpRequest 无法加载 https://miramar21.com/tut_server/default/api/verify/person/james.bond@outlook.com/Prometheus 。无效的 HTTP 状态代码 400

我尝试使用 beforeSend 而不是标题:

  beforeSend: function (xhr) {
    xhr.setRequestHeader ("Authorization", "Basic "+btoa("tyrion@yahoo.ca:Lannister"));
  },

但我得到了相同的结果。 cURL 命令证明登录凭据是正确的,那么为什么 jQuery 会卡住???

最佳答案

简短回答:

该问题的解决方案是通过将
Access-Control-Allow-Methods 设置为 POST、GET、OPTIONS 来允许服务器端点使用 OPTIONS 方法。您也可以添加更多方法。执行此操作后,您从浏览器发出的授权 AJAX 调用将开始正常工作。结账this link ,它有多种语言的示例,用于在服务器端允许特定的 HTTP 请求方法。

详细的:

您发出的 AJAX 请求没有问题,问题出在 URL 端点。您尝试向其发出请求的 URL 的服务器端端点不支持/允许 HTTP 预检 OPTIONS 方法。

jQuery 在这里并没有令人窒息,但浏览器正在拦截请求并首先发出预检请求,这可能是出于安全原因。所有浏览器都强制执行非简单跨域服务器/ajax 请求的预检请求。并且您的请求是跨域请求,首先使用 OPTIONS 方法来检查服务器上是否可以访问其他方法,例如 GET、POST、DELETE 等

现在,我们还看到,当使用 CURL 发出相同的请求时,可以顺利通过。发生这种情况是因为 CURL 不会发出预检请求,而是直接调用服务器 URL 端点上允许的 GET 方法。您可以使用此 CURL 命令发出预检请求(该命令显示该请求是跨源的,并且还启用了 OPTIONS 方法):

curl -v -H "Origin: http://127.0.0.1" -X OPTIONS -k --user tyrion@yahoo.ca:Lannister https://miramar21.com/tut_server/default/api/verify/person/james.bond@outlook.com/Prometheus

您将收到与浏览器中类似的响应,即 404 BAD REQUEST 错误。

使用 GET 方法发出相同的请求:

curl -v -H "Origin: http://127.0.0.1" -X GET -k --user tyrion@yahoo.ca:Lannister https://miramar21.com/tut_server/default/api/verify/person/james.bond@outlook.com/Prometheus

而且,您会看到响应符合您的预期。

OPTIONS 请求不需要授权 header ,因此要检查您的服务器 URL 端点是否支持任何方法,您需要运行类似于以下内容的 CURL 请求:

  1. curl -X OPTIONS -v https://miramar21.com/tut_server/default/api/verify/person/james.bond@outlook.com/Prometheus:这 给出“方法不支持”消息。
  2. curl -X GET -v https://miramar21.com/tut_server/default/api/verify/person/james.bond@outlook.com/Prometheus:这赢了” t给出“方法不支持”消息。

因此,在服务器端脚本中启用/允许 OPTIONS 请求方法可能是解决此问题的方法。

查看此链接以更好地了解预检请求:MDN Access Control CORS .
我希望这对您有帮助。

关于javascript - 如何使用 AJAX 进行正确的 jQuery 用户身份验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30549436/

相关文章:

javascript - 如何在从另一个脚本文件加载 JS 时执行成功回调

javascript - Array.push() 和 Spread 语法之间的区别

javascript - 如何使用js,jquery移动表格滚动条?

php - 仅接受来自经过身份验证的用户的某些 ajax 请求

ajax - 全 Ajax 站点的优点和缺点?

Javascript style.left 为空字符串

javascript - 将数字转换为印度语言环境格式

Javascript:根据当前日期检查格式化的日期值?

jquery - 将 id 数组输入到 jquery 选择器中

javascript - 防止在 AJAX 中滚动重置