我被一个简单的练习所困扰。我有一个需要用户身份验证的 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 请求:
curl -X OPTIONS -v https://miramar21.com/tut_server/default/api/verify/person/james.bond@outlook.com/Prometheus
:这将 给出“方法不支持”消息。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/