生成準確表達文章主題的標題：使用 JavaScript Fetch 設置 Referer 請求頭

本文介紹了在使用 JavaScript 的 fetch API 發送請求時，如何正確設置 Referer 請求頭。Referer 頭用于告知服務器請求的來源頁面，在某些場景下，服務器會根據此頭進行驗證。通過本文，你將了解如何通過修改 fetch 請求的 headers 選項，來模擬 php 中 CURLOPT_REFERER 的功能，從而解決因 Referer 驗證失敗導致的問題。

在使用 JavaScript 的 fetch API 發送 http 請求時，有時需要設置 Referer 請求頭，以模擬從特定頁面發起請求的行為。這在處理跨域請求、API 驗證或模擬用戶行為時非常常見。在 PHP 中，可以使用 CURLOPT_REFERER 選項來設置 Referer 頭。而在 JavaScript 的 fetch 中，則需要在 headers 選項中手動設置。

正確設置 Referer 頭

fetch API 允許你通過 headers 選項自定義請求頭。要設置 Referer 頭，只需將其添加到 headers 對象中即可。

以下是一個示例，演示如何使用 fetch 發送 POST 請求，并設置 Referer 頭：

const cookie = "cookie"; const csrf = "assuming we have csrf ticket already";  fetch("https://auth.roblox.com/v1/authentication-ticket", {   method: "POST",   headers: {     Cookie: ".ROBLOSECURITY=" + cookie,     "x-csrf-token": csrf,     "Referer": "https://www.roblox.com/home" // 正確設置 Referer 頭   }, }) .then(response => response.text()) .then(ticket => {   console.log(ticket); }) .catch(error => {   console.error("Error:", error); });

注意事項

• 拼寫正確： Referer 頭的拼寫必須正確，否則服務器可能無法識別。
• 安全策略： 瀏覽器可能會出于安全原因限制或修改 Referer 頭。在某些情況下，可能無法完全控制 Referer 頭的值。
• 跨域請求： 在處理跨域請求時，服務器端的 CORS (Cross-Origin Resource Sharing) 配置可能會影響 Referer 頭的行為。確保服務器允許來自你的域的請求，并且正確處理 Referer 頭。
• referrerPolicy 屬性： fetch API 還有一個 referrerPolicy 選項，可以控制瀏覽器如何設置 Referer 頭。 默認情況下，瀏覽器會根據文檔的 referrerPolicy 設置來決定如何設置 Referer。你可以使用 referrerPolicy 選項來覆蓋默認行為，例如，設置為 no-referrer 可以完全禁止發送 Referer 頭。

總結

通過在 fetch 請求的 headers 選項中設置 Referer 字段，可以模擬 PHP 中 CURLOPT_REFERER 的功能。確保正確拼寫 Referer，并注意瀏覽器安全策略和 CORS 配置，以避免潛在的問題。 理解并正確使用 Referer 頭，能夠幫助你更好地控制 HTTP 請求的行為，解決因 Referer 驗證失敗導致的問題。