JavaScript Fetch 請求中設置 Referer 的正確方法

本文旨在解決在使用 JavaScript 的 fetch API 發送請求時，如何正確設置 Referer 請求頭，模擬 php 中 CURLOPT_REFERER 的功能。我們將通過示例代碼和注意事項，詳細講解如何在 fetch 請求中添加 Referer，并避免常見的錯誤。

在 JavaScript 的 fetch API 中，要設置 Referer 請求頭，不能直接使用 referrer 選項。referrer 選項主要用于控制瀏覽器在導航到新頁面時如何設置 Referer 頭，而不是用于控制 fetch 請求的 Referer 頭。

正確的做法是將 Referer 頭添加到 fetch 請求的 headers 對象中。以下是一個示例：

const cookie = "cookie"; const csrf = "assuming we have csrf ticket already";  async function getAuthenticationTicket() {   try {     const response = await 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 的方式         },       }     );      if (!response.ok) {       console.error(`HTTP error! status: ${response.status}`);       const errorText = await response.text();       console.error(`Error Response: ${errorText}`);       return;     }      const ticket = await response.text();     console.log(ticket);   } catch (error) {     console.error("Fetch error:", error);   } }  getAuthenticationTicket();

代碼解釋：

1. headers 對象： 在 fetch 請求的配置對象中，我們使用 headers 屬性來設置請求頭。headers 是一個對象，其中鍵是請求頭的名稱，值是請求頭的值。
2. “Referer”: “https://www.roblox.com/home”： 我們通過將 “Referer” 鍵添加到 headers 對象中，并將值設置為 “https://www.roblox.com/home”，來設置 Referer 請求頭。

注意事項：

• 安全性： 在實際應用中，請注意 Referer 頭的安全性。某些服務器可能會驗證 Referer 頭，以防止跨站請求偽造（CSRF）攻擊。確保你了解目標服務器對 Referer 頭的要求。
• CORS： 跨域資源共享（CORS）策略可能會影響 Referer 頭的設置。如果你的請求是跨域的，并且目標服務器沒有正確配置 CORS 策略，可能會導致請求失敗。
• 大小寫： 雖然 HTTP 頭部名稱通常不區分大小寫，但建議使用標準的 “Referer” 大小寫形式，以確保最佳的兼容性。
• 錯誤處理： 請務必添加適當的錯誤處理機制，以便在請求失敗時能夠及時發現并處理問題。在示例代碼中，我們添加了 try…catch 塊來捕獲 fetch 請求可能拋出的錯誤，并使用 response.ok 來檢查 HTTP 響應狀態碼。

總結：

通過將 “Referer” 鍵添加到 fetch 請求的 headers 對象中，我們可以正確地設置 Referer 請求頭。在實際應用中，請注意安全性、CORS 策略和錯誤處理，以確保請求能夠成功發送并獲得預期的結果。避免使用 referrer 選項來設置請求頭，因為它主要用于控制導航行為，而不是 fetch 請求。