前端项目中修改request中的Referer

需求：将request，header中的Referer的链接后面拼接的token等隐藏.

1、Referer简介

referer参数是http请求头header里的一个关键参数，表示的意思是链接的来源地址，比如在页面引入图片、JS 等资源，或者跳转链接，一般不修改策略，都会带上Referer

2、Referer安全性

Referer这个http header的参数应用得当的话，是可以提高安全性的，比如，可以这个参数其实就告诉了链接的请求来源于哪个网站，所以可以根据这个特性，限制一些接口只能本网站的才能调，外部网站不能调

3、Referrer Policy

Referrer Policy是W3C官方提出的一个候选策略，主要用来规范Referrer

官网：https://www.w3.org/TR/referrer-policy/

最初是只有5种策略的，现在规范增加到9种

enum ReferrerPolicy {
  "",
  "no-referrer",
  "no-referrer-when-downgrade",
  "same-origin",
  "origin",
  "strict-origin",
  "origin-when-cross-origin",
  "strict-origin-when-cross-origin",
  "unsafe-url"
};

3.1、no-referrer

不发送referrer信息

3.2、no-referrer-when-downgrade

协议降级时候不发送Referrer信息，其实https的网站链接调到http的网站链接

3.3、same-origin

同源链接(协议、域名、端口都相同)发送，否则不发送

3.4、origin

Referrer发送的信息只包括协议+域名+端口，不包括其它信息

3.5、strict-origin

https的网站协议降级访问http的网站，这种情况就是一种不严格的情况，这种情况不发送Referrer，其它情况发送Referrer(协议+域名+端口)，注意这里的Referrer同样只包括协议+域名+端口而已

3.6、origin-when-cross-origin

跨域时候发送Referrer(协议+域名+端口)，其它情况也就是同源的情况发送完整的Referrer信息

3.7、strict-origin-when-cross-origin

这里有两个条件，1、严格模式，也就是不会出现https的网站协议降级调http的链接；2、跨域，符合这两种情况的，发送Referrer(协议+域名+端口)，其它情况包括https的网站调http的链接这种协议降级的情况，等等，还有很多情况，这些情况都发送完整的Referrer

3.8、unsafe-url

这种情况是不管是否协议降级访问，还是同源跨域访问，全都发送Referrer，当然这里的Referrer也是完整的Referrer，有什么就发什么，所以这种是一种不安全的协议

3.9、空字符串

空字符串“”对应于无引用者策略，导致回退到其他位置定义的引用者策略，或者在没有此类更高级别策略的情况下，默认为“ no-referrer-when-downgrade”。此默认设置发生在官网§8.3确定请求的Referrer算法中。

使用：

在vue-router中的index.js文件中：

let head = document.getElementsByTagName('head');let meta = document.createElement('meta');meta.name = 'referrer';//根据实际情况修改referrer的值，可选值参考上文meta.content = 'strict-origin';head[0].appendChild(meta);