本文旨在解决在使用 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();代码解释：
立即学习“Java免费学习笔记（深入）”；
- headers 对象： 在 fetch 请求的配置对象中，我们使用 headers 属性来设置请求头。headers 是一个对象，其中键是请求头的名称，值是请求头的值。
- "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 请求。
