將標頭添加到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-token，則這是預期的錯誤。正如我所提到的，對標頭的檢查不會顯示 x-token。

我看到的標題是：

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

在此先感謝您的任何建議。

uj5u.com熱心網友回復：

沒有發表評論的聲譽...您能告訴我們您使用的是什么 3rd 方 API 嗎？

我們使用 OKTA 保護我們的 B2B 網站，并像這樣進行 ajax 呼叫：

$.ajax({
      url   : api,
      data  : str1,
      headers: {"x-auth-header": localStorage.getItem("access_token")},
      type  : "GET"
})

uj5u.com熱心網友回復：

JSONP 通過注入具有屬性的<script>元素來作業。src

無法在<script>元素上設定請求標頭。

這是 JSONP 的眾多限制之一。

改用 XMLHttpRequest 或 fetch 來請求帶有 CORS 的 JSON。

您設定的標頭之一是Accept: application/json沒有意義的，因為您可以使用 JSONP 決議的唯一資料格式是 JSONP（它是的子集text/javascript）。

我有一種預感，問題在于第三方不支持跨域請求，而您正試圖通過使用 JSONP 來破解它。這是行不通的，因為 JSONP 要求它們明確支持 JSONP（就像現代跨域請求要求它們明確支持 CORS）。

如果第三方不支持跨域請求，那么您需要從瀏覽器以外的地方發出請求。例如，通過您自己的服務器代理它。

uj5u.com熱心網友回復：

您是否嘗試僅設定headers 屬性？請注意，某些標頭可能會與 jQuery 嘗試做的事情發生沖突。

$.ajax({
        type: "GET",
        url: "https://<somesite>.com/<path>",
        accept: "application/json",
        dataType: "jsonp",
        crossDomain: true,
        headers: { 
          "Accept": "application/json",
          "x-token": "<token value>" 
        }, 
        data: {
          select: "timeZoneId"
        },
        success: function (data, status) {
          debugger;
          alert("Sucess");
        },
        error: function (xhr, status, error) {
          debugger;
          alert("Error! :"   xhr.status);
        }
      });

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/449153.html

標籤：javascript jQuery 阿贾克斯标题 jsonp

上一篇：樹型結構

下一篇：使用JQUERY禁用下拉選單項