如何在 JavaScript 的 Fetch 請求中設置 Referer

本文旨在講解如何在 JavaScript 的 fetch 請求中正確設置 Referer 請求頭，以模擬 php 中 CURLOPT_REFERER 的功能。我們將探討如何通過 headers 選項添加 Referer，并提供示例代碼和注意事項，幫助你解決實際開發中遇到的問題。

在進行網絡請求時，Referer 請求頭用于告知服務器請求的來源頁面。在某些情況下，服務器會驗證 Referer 頭以確保請求的合法性。在 PHP 中，可以使用 CURLOPT_REFERER 選項來設置 Referer。而在 JavaScript 中，使用 fetch API 時，需要通過 headers 選項來設置。

設置 Referer 請求頭

fetch API 提供了 headers 選項，允許你自定義請求頭。要設置 Referer，只需將 Referer 鍵值對添加到 headers 對象中即可。

以下是一個示例：

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"   }, }) .then(response => response.text()) .then(ticket => {   console.log(ticket); }) .catch(error => {   console.error("Error:", error); });

在這個例子中，我們將 Referer 設置為 https://www.roblox.com/home。注意，Referer 必須作為一個字符串值添加到 headers 對象中。

注意事項

• 安全性： 某些瀏覽器或網絡環境可能會阻止或修改 Referer 頭。這可能會導致請求失敗或服務器拒絕請求。
• CORS： 跨域資源共享 (CORS) 策略可能會影響 Referer 頭的發送。確保服務器正確配置了 CORS 策略，允許你的域名發送請求。
• 拼寫： 務必確保 Referer 拼寫正確，大小寫敏感。
• 測試： 在實際部署之前，務必測試你的代碼，以確保 Referer 頭被正確發送，并且服務器能夠正確處理它。

總結

通過 fetch API 的 headers 選項，可以輕松地在 JavaScript 中設置 Referer 請求頭。但是，請務必注意安全性和 CORS 策略，并進行充分的測試，以確保你的代碼能夠正常工作。在遇到問題時，檢查服務器的響應和瀏覽器的開發者工具，以獲取更多信息。