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

本文旨在解決在使用JavaScript的fetch API發起請求時，如何正確設置Referer請求頭的問題。通過示例代碼和詳細解釋，幫助開發者理解Referer的作用以及如何在fetch請求中正確配置，避免常見的“UrlReferrer was invalid”錯誤。

在使用JavaScript的fetch API發起網絡請求時，有時需要設置Referer請求頭，模擬用戶從特定頁面跳轉到目標頁面的行為。這在某些API接口中用于驗證請求的來源，防止跨站請求偽造（csrf）等安全問題。類似于php中的CURLOPT_REFERER，JavaScript的fetch API需要通過特定的方式來設置Referer。

正確的設置方法

與直接在fetch配置中使用referrer字段不同，設置Referer請求頭應該通過headers選項來完成。這是因為referrer字段主要用于控制瀏覽器自身的Referer策略，而Referer header 才是真正發送給服務器的請求頭。

以下是正確的示例代碼：

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請求頭被添加到headers對象中，其值為https://www.roblox.com/home。這樣，服務器就能正確接收到Referer信息，并進行相應的驗證。

注意事項

• 大小寫敏感： Referer是一個標準的HTTP請求頭，需要注意大小寫，建議使用首字母大寫的形式。
• 安全性： 在設置Referer時，需要確保其值的安全性，避免泄露敏感信息。通常情況下，設置為發起請求的頁面的URL即可。
• CORS： 跨域請求（CORS）可能會影響Referer的發送。服務器需要正確配置CORS策略，允許來自特定域的請求攜帶Referer信息。
• 權限策略： 瀏覽器可能會基于權限策略限制對Referer的修改。如果遇到問題，請檢查瀏覽器的安全設置和網站的權限策略。

總結

在JavaScript的fetch API中，通過headers選項設置Referer請求頭是正確的方法。遵循上述注意事項，可以避免常見的錯誤，確保請求能夠正確地攜帶Referer信息，從而滿足服務器的驗證需求。請記住，referrer 字段不等同于 Referer 請求頭，它們的作用范圍和使用場景有所不同。