本文介绍了在使用 JavaScript 的 fetch API 发送请求时，如何正确设置 Referer 请求头。Referer 头用于告知服务器请求的来源页面，在某些场景下，服务器会根据此头进行验证。通过本文，你将了解如何通过修改 fetch 请求的 headers 选项，来模拟 PHP 中 CURLOPT_REFERER 的功能，从而解决因 Referer 验证失败导致的问题。
在使用 JavaScript 的 fetch API 发送 HTTP 请求时，有时需要设置 Referer 请求头，以模拟从特定页面发起请求的行为。这在处理跨域请求、API 验证或模拟用户行为时非常常见。在 PHP 中，可以使用 CURLOPT_REFERER 选项来设置 Referer 头。而在 JavaScript 的 fetch 中，则需要在 headers 选项中手动设置。
正确设置 Referer 头
fetch API 允许你通过 headers 选项自定义请求头。要设置 Referer 头，只需将其添加到 headers 对象中即可。
立即学习“Java免费学习笔记（深入）”；
以下是一个示例，演示如何使用 fetch 发送 POST 请求，并设置 Referer 头：
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" // 正确设置 Referer 头
},
})
.then(response => response.text())
.then(ticket => {
console.log(ticket);
})
.catch(error => {
console.error("Error:", error);
});注意事项
- 拼写正确： Referer 头的拼写必须正确，否则服务器可能无法识别。
- 安全策略： 浏览器可能会出于安全原因限制或修改 Referer 头。在某些情况下，可能无法完全控制 Referer 头的值。
- 跨域请求： 在处理跨域请求时，服务器端的 CORS (Cross-Origin Resource Sharing) 配置可能会影响 Referer 头的行为。确保服务器允许来自你的域的请求，并且正确处理 Referer 头。
- referrerPolicy 属性： fetch API 还有一个 referrerPolicy 选项，可以控制浏览器如何设置 Referer 头。 默认情况下，浏览器会根据文档的 referrerPolicy 设置来决定如何设置 Referer。你可以使用 referrerPolicy 选项来覆盖默认行为，例如，设置为 no-referrer 可以完全禁止发送 Referer 头。
总结
通过在 fetch 请求的 headers 选项中设置 Referer 字段，可以模拟 PHP 中 CURLOPT_REFERER 的功能。确保正确拼写 Referer，并注意浏览器安全策略和 CORS 配置，以避免潜在的问题。 理解并正确使用 Referer 头，能够帮助你更好地控制 HTTP 请求的行为，解决因 Referer 验证失败导致的问题。
