JavaScript window.location 不会设置请求头中的 referer 字段

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 字段。示例代码如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.setRequestHeader('referer', 'https://example.com');
xhr.send();

在以上代码中，我们通过 XMLHttpRequest 对象来发起一个 GET 请求，并在请求头中设置 referer 字段为 https://example.com。

另外，如果你在使用 fetch 或者 axios 等库发送 HTTP 请求的时候也需要设置 referer 字段，可以像下面这样进行配置：

fetch('/api/data', {
  headers: {
    referer: 'https://example.com',
  },
});

总结

在前端开发中，我们经常需要手动设置 referer 字段。当我们使用 window.location 修改 URL 时，并不会自动设置请求头中的 referer 字段。如果你需要手动设置 referer 字段，可以使用 XMLHttpRequest 对象来发起请求，并在请求头中设置 referer 字段，或者在使用 fetch 或者 axios 发送请求时，在 headers 中设置 referer 字段即可。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31135