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 请求。