referer 是 HTTP 请求头中的一个字段，用于告诉服务器当前请求来自哪个地址。在一些场景下，我们可能需要手动设置 referer，比如进行 CSRF 防护或者统计分析等。
在前端开发中，我们可以通过 JavaScript 的 window.location 对象来修改当前页面的 URL，但是你可能不知道的是，使用 window.location 修改 URL 并不会自动设置请求头中的 referer 字段。
原因分析
从 MDN 文档 上可以看到，window.location 是 Location 对象的一个实例，而 Location 对象的 href 属性用于返回当前文档的完整 URL 地址，包括协议、域名、路径等信息。
当我们通过修改 window.location.href 属性来改变当前 URL 时，浏览器会按照新 URL 发起一个新的请求，并且此时请求头中的 referer 字段并不会被设置。这是因为对于浏览器来说，这次请求和上次请求的来源是相同的，所以不需要重新设置 referer。
解决方案
如果我们需要手动设置 referer 字段，可以使用 XMLHttpRequest 对象来发起请求，并在请求头中设置 referer 字段。示例代码如下：
----- --- - --- ----------------- --------------- ------------- ------------------------------- ----------------------- -----------
在以上代码中，我们通过 XMLHttpRequest 对象来发起一个 GET 请求，并在请求头中设置 referer 字段为 https://example.com。
另外，如果你在使用 fetch 或者 axios 等库发送 HTTP 请求的时候也需要设置 referer 字段，可以像下面这样进行配置：
------------------ -
-------- -
-------- ----------------------
--
---总结
在前端开发中，我们经常需要手动设置 referer 字段。当我们使用 window.location 修改 URL 时，并不会自动设置请求头中的 referer 字段。如果你需要手动设置 referer 字段，可以使用 XMLHttpRequest 对象来发起请求，并在请求头中设置 referer 字段，或者在使用 fetch 或者 axios 发送请求时，在 headers 中设置 referer 字段即可。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31135