Vue项目中的Referrer Policy相关问题

如果大家在开发Vue项目时遇到了有关Referrer Policy的问题，类似下面的情况：

错误图片

那么这种问题就是Referrer Policy问题。首先我们先了解一下什么是Referrer Policy

Referrer简介

简单来说，Referrer 是HTTP协议中的一个请求报头，用于告知服务器用户的来源页面。比如说你从Google搜索结果中点击进入了某个页面，那么此次HTTP请求中的Referrer 就是Google搜索结果页面的地址。如果你的某篇博客中引用了其他地方的一张图片，那么对该图片的HTTP请求中的Referrer 就是你那篇博客的地址。
一般Referrer 主要用于统计，像CNZZ、百度统计等可以通过Referrer 统计访问流量的来源和搜索的关键词（包含在URL中）等等，方便站长们有针性对的进行推广和SEO什么的
当然Referrer 另一个用处就是防盗链了，主要是图片和网盘服务器使用的较多。盗链的危害不言而喻，侵犯了版权不说，增加了服务器的负荷，却没有给真正的服务提供者带来实际利益（广告点击什么的）。
另外注意的是，Referrer是浏览器为我们自动加上的。

Referrer Policy简介

Referrer Policy的作用就是的作用就是为了控制请求头中referrer的内容，目前是一个候选标准，不过已经有部分浏览器支持该标准。
目前Referrer-Policy只包含以下几种值：

• no-referrer
  整个 Referrer 首部会被移除。访问来源信息不随着请求一起发送。也就是说当你访问A页面时，点击了A页面上的某个超链接进入了B页面，那么对B页面访问的请求头中不会包含Referrer字段。
• no-referrer-when-downgrade
  在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下，引用页面的地址会被发送(HTTPS->HTTPS)，但是在降级的情况下不会被发送 (HTTPS->HTTP)。即当访问的协议都是https时，对新访问的页面的请求头中会包含旧页面的全部链接，但是当旧页面的协议时https，新页面的协议是http时，对新页面的访问的请求头Referrer字段不会包含任何值。
• origin
  在任何情况下，仅发送链接的域名作为Referrer字段的值。例如 https://example.com/page.html 会将 https://example.com/ 作为Referrer的值。
• origin-when-cross-origin
  对于相同域名的请求，会发送完整的URL作为Referrer的值，但是对于非同源请求仅发送旧页面的域名。
• same-origin
  对于同源的请求会发送旧业面全部URL，但是对于非同源请求则不发送旧页面的全URL息。
• strict-origin
  在同等安全级别的情况下，发送文件的域名作为引用地址(HTTPS->HTTPS)，但是在降级的情况下不会发送 (HTTPS->HTTP)。
• strict-origin-when-cross-origin
  对于同源的请求，会发送完整的URL；不同源的请求在同等安全级别的情况下，发送文件的域名作为引用地址(HTTPS->HTTPS)；在降级的情况下不发送此首部 (HTTPS->HTTP)。
• unsafe-url
  无论是同源请求还是非同源请求，都发送完整的 URL（移除参数信息之后）作为引用地址。

示例

Policy	Document	Navigation to	Referrer
no-referrer	https://example.com/page.html	any domain or path	no referrer
no-referrer-when-downgrade	https://example.com/page.html	https://example.com/otherpage.html	https://example.com/page.html
no-referrer-when-downgrade	https://example.com/page.html	https://mozilla.org	https://example.com/page.html
no-referrer-when-downgrade	https://example.com/page.html	http://example.org	no referrer
origin	https://example.com/page.html	any domain or path	https://example.com/
origin-when-cross-origin	https://example.com/page.html	https://example.com/otherpage.html	https://example.com/page.html
origin-when-cross-origin	https://example.com/page.html	https://mozilla.org	https://example.com/
origin-when-cross-origin	https://example.com/page.html	http://example.com/page.html	https://example.com/
same-origin	https://example.com/page.html	https://example.com/otherpage.html	https://example.com/page.html
same-origin	https://example.com/page.html	https://mozilla.org	no referrer
strict-origin	https://example.com/page.html	https://mozilla.org	https://example.com/
strict-origin	https://example.com/page.html	http://example.org	no referrer
strict-origin	http://example.com/page.html	any domain or path	http://example.com/
strict-origin-when-cross-origin	https://example.com/page.html	https://example.com/otherpage.html	https://example.com/page.html
strict-origin-when-cross-origin	https://example.com/page.html	https://mozilla.org	https://example.com/
strict-origin-when-cross-origin	https://example.com/page.html	http://example.org	no referrer
unsafe-url	https://example.com/page.html	any domain or path	https://example.com/page.html

Vue中全局修改Referrer的方法

在项目的router.js文件中加入以下代码：

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

改变referrer的值重新运行项目可以看到请求成功！

正确图片