如何在 JavaScript 的 Fetch 请求中设置 Referer

本文旨在讲解如何在 JavaScript 的 fetch 请求中正确设置 Referer 请求头，以模拟 php 中 CURLOPT_REFERER 的功能。我们将探讨如何通过 headers 选项添加 Referer，并提供示例代码和注意事项，帮助你解决实际开发中遇到的问题。

在进行网络请求时，Referer 请求头用于告知服务器请求的来源页面。在某些情况下，服务器会验证 Referer 头以确保请求的合法性。在 PHP 中，可以使用 CURLOPT_REFERER 选项来设置 Referer。而在 JavaScript 中，使用 fetch API 时，需要通过 headers 选项来设置。

设置 Referer 请求头

fetch API 提供了 headers 选项，允许你自定义请求头。要设置 Referer，只需将 Referer 键值对添加到 headers 对象中即可。

以下是一个示例：

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"   }, }) .then(response => response.text()) .then(ticket => {   console.log(ticket); }) .catch(error => {   console.error("Error:", error); });

在这个例子中，我们将 Referer 设置为 https://www.roblox.com/home。注意，Referer 必须作为一个字符串值添加到 headers 对象中。

注意事项

• 安全性： 某些浏览器或网络环境可能会阻止或修改 Referer 头。这可能会导致请求失败或服务器拒绝请求。
• CORS： 跨域资源共享 (CORS) 策略可能会影响 Referer 头的发送。确保服务器正确配置了 CORS 策略，允许你的域名发送请求。
• 拼写： 务必确保 Referer 拼写正确，大小写敏感。
• 测试： 在实际部署之前，务必测试你的代码，以确保 Referer 头被正确发送，并且服务器能够正确处理它。

总结

通过 fetch API 的 headers 选项，可以轻松地在 JavaScript 中设置 Referer 请求头。但是，请务必注意安全性和 CORS 策略，并进行充分的测试，以确保你的代码能够正常工作。在遇到问题时，检查服务器的响应和浏览器的开发者工具，以获取更多信息。