这篇文章主要介绍了Vue关于访问外链失败的问题如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue关于访问外链失败的问题如何解决文章都会有所收获，下面我们一起来看看吧。
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的存在。
Vue打开一个外部连接
记录一个开发中不太起眼的bug
在vue项目中，许多跳转api都只是会更改uri，即域名后的地址，一个比较直观的思路是location.href，但直接调用只是会在当前地址下追加一个url，所以正确的做法是
<el-table-column prop="gaintestMp4" label="步态视频" >
<template #default="scope">
<el-button v-show="scope.row.gaintestMp4" @click="handleMp4(scope.row.gaintestMp4)"></el-button>
</template>
</el-table-column>
const handleMp4=(mp4:string):void=>{
location.href="https://www.19jp.com">以上就是Vue关于访问外链失败的问题如何解决的详细内容，更多关于Vue关于访问外链失败的问题如何解决的资料请关注九品源码其它相关文章！