Vue项目中的Referrer Policy相关问题
2019-11-10 本文已影响0人
sxh不是帅小伙
如果大家在开发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（移除参数信息之后）作为引用地址。
示例
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的值重新运行项目可以看到请求成功！
正确图片
