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=`http://${mp4}`
  // console.log("🚀 ~ file: backstage.vue:54 ~ handleMp4 ~ mp4", mp4)
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。