向ajax请求添加标头失败
这似乎非常简单，但我无法将额外的 HTTP 标头添加到我尝试发出的请求中。我通过浏览器开发人员工具以及 BurpSuite 观看过。我正在使用 JSONP，因为这是跨站点调用，但这应该不重要。我很困惑并寻求一些指导。
我需要在我从第 3 方 Rest API 发出的请求的标头中添加一个令牌/值以进行身份验证。我已将代码剥离到示例页面中以进行调试。这是我正在使用的示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function getData() {
$.ajax({
type: "GET",
url: "https://<somesite>.com/<path>",
accept: "application/json",
dataType: "jsonp",
crossDomain: true,
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("x-token","<token value>");
},
data: {
select: "timeZoneId"
},
success: function (data, status) {
debugger;
alert("Sucess");
},
error: function (xhr, status, error) {
debugger;
alert("Error! :" + xhr.status);
}
});
}
</script>
</head>
<body>
<button type="button" onclick="getData()">Submit</button>
</body>
</html>
我已经通过添加 x-token 作为标头经历了各种扭曲，但我可以看到它从未被添加到请求中。请求的结果始终是 401 未经授权的错误，如果传递无效/丢失的 x 令牌，则这是预期的错误。正如我所提到的，对标头的检查不会显示 x 令牌。
我看到的标题是：
GET /redzone/public/bi/v_completeddataitem?callback=jQuery36009809687059838048_1648150351509&select=timeZoneId&_=1648150351510 HTTP/2
Host: <somesite>.com
Cookie: AWSALBCORS=f+1AWICQyRddSBjj6CNFH6f6XAnVjPOqAMq1JcPj9CCN1x1Izv1cFFXFKo7IKop53Lw4Y95mWWRjzHRAtOwTGccbwbvS8DBCDxJZY8WA9dEwu2Z/XKPeiSV+rAsb
Sec-Ch-Ua: "(Not(A:Brand";v="8", "Chromium";v="99"
Sec-Ch-Ua-Mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36
Sec-Ch-Ua-Platform: "Windows"
Accept: */*
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: script
Referer: http://localhost/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
提前感谢您的任何建议。
This would seem to be very straightforward, but I cannot get additional HTTP headers added into a request that I'm attempting to make. I've watched via the browser developer tools as well as with BurpSuite. I'm using JSONP since this is a cross-site call, but that shouldn't matter. I'm stumped and looking for some guidance.
I need to add a token/value in the header of the request I'm making of from a 3rd parties Rest API for authentication. I've stripped the code out into a sample page for debugging purposes. Here is the sample that I'm using:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function getData() {
$.ajax({
type: "GET",
url: "https://<somesite>.com/<path>",
accept: "application/json",
dataType: "jsonp",
crossDomain: true,
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("x-token","<token value>");
},
data: {
select: "timeZoneId"
},
success: function (data, status) {
debugger;
alert("Sucess");
},
error: function (xhr, status, error) {
debugger;
alert("Error! :" + xhr.status);
}
});
}
</script>
</head>
<body>
<button type="button" onclick="getData()">Submit</button>
</body>
</html>
I've gone through all kinds of contortions with adding the x-token as a header, but it's never getting added into the request, that I can see. The result of the request is always a 401 unauthorized error, which is the expected error if an invalid/missing x-token is being passed. As I've mentioned, an inspection of the headers does not show the x-token.
The headers that I do see are:
GET /redzone/public/bi/v_completeddataitem?callback=jQuery36009809687059838048_1648150351509&select=timeZoneId&_=1648150351510 HTTP/2
Host: <somesite>.com
Cookie: AWSALBCORS=f+1AWICQyRddSBjj6CNFH6f6XAnVjPOqAMq1JcPj9CCN1x1Izv1cFFXFKo7IKop53Lw4Y95mWWRjzHRAtOwTGccbwbvS8DBCDxJZY8WA9dEwu2Z/XKPeiSV+rAsb
Sec-Ch-Ua: "(Not(A:Brand";v="8", "Chromium";v="99"
Sec-Ch-Ua-Mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36
Sec-Ch-Ua-Platform: "Windows"
Accept: */*
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: script
Referer: http://localhost/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Thanks in advance for any suggestions.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
JSONP 的工作原理是注入带有
src属性的无法在
这是 JSONP 的众多限制之一。
使用 XMLHttpRequest 或 fetch 通过 CORS 请求 JSON。
您设置的标头之一是
Accept: application/json，这没有意义，因为您可以使用 JSONP 解析的唯一数据格式是 JSONP （它是 JSONP 的子集）text/javascript）。我有预感，问题在于第三方不支持跨源请求，而您正尝试使用 JSONP 来破解它。这是行不通的，因为 JSONP 要求它们显式支持 JSONP（就像现代跨域请求要求它们显式支持 CORS 一样）。
如果第三方不支持跨域请求，那么您需要从浏览器以外的地方发出请求。例如通过您自己的服务器代理它。
JSONP works by injecting a
<script>element with asrcattribute.There is no way to set request headers on a
<script>element.This is one of the many limitations of JSONP.
Use XMLHttpRequest or fetch to request JSON with CORS instead.
One of the headers you are setting is
Accept: application/jsonwhich doesn't make sense since the only data format you can parse using JSONP is JSONP (which is a subset oftext/javascript).I have a hunch that the problem is that the third party doesn't support cross-origin requests and you are trying to hack around it by using JSONP. That won't work since JSONP requires they explicitly support JSONP (just as a modern cross-origin request requires that they explicitly support CORS).
If the third-party doesn't support cross-origin requests then you need to make the request from somewhere that is not the browser. e.g. proxy it through your own server.