Fetch设置Referer的正确方式

在使用 JavaScript 的 fetch API 发送请求时，如何正确设置 Referer 请求头，模拟 PHP 中 CURLOPT_REFERER 的功能？本文将详细讲解如何在 fetch 请求中添加 Referer，并避免常见的错误。不同于 `referrer` 选项，设置 fetch 请求的 Referer 头需要将其添加到 `headers` 对象中。文章提供示例代码，展示了如何通过设置 `headers` 对象的 `Referer` 键值对来正确设置 Referer 请求头，并强调了安全性、CORS 策略和错误处理等注意事项。掌握这些技巧，能确保你的 fetch 请求成功发送并获得预期结果，有效防止跨站请求伪造（CSRF）攻击。

本文旨在解决在使用 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 请求。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Fetch设置Referer的正确方式》文章吧，也可关注golang学习网公众号了解相关技术文章。