Vue 访问外链失败问题

前言：

                在公司项目中，点击跳转外部链接时，发现跳转失败，但是在浏览器访问可以直接访问，抱着求知欲的目的，查找资料得出一下结果，作为知识储备吧。

军工项目登录跳转到另一个项目的登录中，window.open 可以直接打开百度，但是打不开要跳转的登录页，但是直接在浏览器中可以直接访问，猜想是否是对方对服务做了安全方面的处理或者限制，抱着这方面的考虑查找资料。

一个涉及安全和隐私的https请求头中的字段—referrer，对方项目服务器为了防止别人盗取资源做了限制，一般打开页面会有一个referrer，如果是从其他页面跳转过去，这个referrer会带着原来的页面地址，服务器检测到之后就会限制访问，将其设置为no-referrer就不会带原页面的地址，服务器会认为是直接在浏览器中输入地址打开，就不会限制了。

解决方案：在index.html 中添加 <meta name="referrer" content="no-referrer"/>

什么是 referrer ？

当前页访问跳转到目标页，目标页会在headers中收到 referrer 信息，referrer里面存储的是用户从哪个页面跳转到目标页的信息，也就是说发起请求的时候，请求头中带有从哪个页面来的信息，网站会将引用地址记录以便追踪用户的动态或进行统计，大部分分析软件也都会处理这个信息。一般会从两方面去考虑：隐私和安全。

隐私

referrer 会携带url过去，里面有可能有一些用户数据信息或者敏感信息有可能会暴露出去。

安全

referrer 为了安全考虑不把一些用户信息或者敏感信息暴露出去，我们就要使用 Referrer-Policy来规范 referrer 可以返回什么样的内容

1、通过Referrer-Policy HTTP header设置 Referrer-Policy: origin

2、通过<meta>元素改变Referrer Policy，直接修改名为referrer的内容 <meta name="referrer" content="no-referrer"/>

3、通过给 <a>, <area>, <img>, <iframe>, 或者<link>元素设置referrerpolicy="origin"属性

4、通过给  <a>, <area>, <img>, <iframe>, 或者<link> 元素设置 rel="noreferrer"属性不显示信息

备注： 只有在https协议中，才有referrer的存在。