如何正確分配標頭以在 Javascript 中獲取請求

Question

我對更高級的 API 還是很陌生，我正在嘗試使用 fetch 向外部 API 發送 GET 請求，並帶有 API 所有者詳細說明的相應標頭。

但是，我仍然收到 403 Forbidden 錯誤，而且似乎標頭實際上並未隨請求一起發送，因為 Chrome DevTools 顯示“正在顯示臨時標頭”。

我正在使用 CORS 代理： https : //cors-anywhere.herokuapp.com/ ，它與其他更簡單的 API 請求一起使用。

const proxy = 'https://cors-anywhere.herokuapp.com/';
const api = `${proxy}https://api-example.com`; // Obfuscated


// Generate the data
fetch(api, data = {}, {
    credentials: "include",
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      Authorization: "Bearer eLrw3eXlljyFRjaul5UoYZLNgpUeapbXSFKmLc5SVaBgv8azUtoKn7B062PjbYoS",
      "User-Agent": "any-name"
    },
    body: JSON.stringify(data)
})
    .then(response => {
        return response.text();
    })

API 請求在 Postman 中工作並使用 curl，但在我的應用程序中，我收到了 403 Forbidden 響應。 如前所述，請求標頭中僅顯示臨時標頭； 我沒有設置任何標題。

任何幫助將非常感激。 謝謝！

Answer 1

看起來好像您正在傳遞一個空對象作為選項。 fetch() 函數只接受兩個參數， resource (uri) 和options對象（請參閱： https : //developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch ）。 您有一個空對象data = {}作為第二個參數，您的選項指定為未使用的第三個參數。 我相信您想要的是刪除data參數，特別是因為您不需要在 GET 請求中發送body 。

fetch(api, {
    credentials: "include",
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      Authorization: "Bearer eLrw3eXlljyFRjaul5UoYZLNgpUeapbXSFKmLc5SVaBgv8azUtoKn7B062PjbYoS",
      "User-Agent": "any-name"
    }
})
.then(response => {
    return response.text();
})

Answer 2

該 api 在 Postman 和 curl 中工作，如果您確定以相同的方式發送所有請求和標頭，則可能是 CORS 問題。 您沒有提供足夠的信息來真正了解情況是否如此。

但是，我試圖解釋我所理解的 CORS 如何為瀏覽器工作。 瀏覽器在發出請求（例如 GET、POST、DELETE 等）之前發出 OPTIONS 請求。 如果處理請求的服務器發現該主機允許該請求（使用源和其他一些因素），則服務器以成功響應進行響應。 當瀏覽器看到 OPTIONS 請求成功時，瀏覽器就會執行實際的請求（GET、POST、DELETE 等等）。

有時對於本地開發，您可能需要克服這個問題，因為服務器不支持 localhost。 在這種情況下，您可以使用瀏覽器擴展來攔截您的 xhr 請求並為您的瀏覽器模擬成功的 OPTIONS 請求，並且您的瀏覽器認為服務器已成功響應 OPTIONS 調用，因此它允許調用。

將標題與您的請求一起發送將不起作用。 api 服務器必須允許返回狀態為 200 的選項請求，以便您的應用程序能夠從瀏覽器進行該調用。

以上所有內容均基於您從瀏覽器發送請求的方式與從郵遞員或 curl 發送請求的方式相同。 如果您使用 Windows，您可以驗證是否使用像 Fiddler 這樣的網絡監視器應用程序。 如果你在 macOS 或 Linux 上，我不知道像 Fiddler 這樣的工具，肯定有工具，但由於我不在這些平台上工作，我不能建議其他工具來監控網絡。