生成准确表达文章主题的标题：使用 JavaScript Fetch 设置 Referer 请求头

本文介绍了在使用 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 对象中即可。

以下是一个示例，演示如何使用 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 验证失败导致的问题。