关于浏览器输入地址可以打开资源但是通过 a标签或window.open ’无法打开报错的问题

最新推荐文章于 2025-05-14 22:27:35 发布

chailovely

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量490

点赞数 12

文章标签：前端视频 vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_42670523/article/details/142216797

版权

关于：最近碰到一个问题，使用 ‘a标签’ 或者 'window.open‘ 做跳转，跳是跳过去了，可是跳过去以后，会显示403佛波勒；但是当直接把链接地址输入在浏览器地址栏时又可以访问。

大致代码如下：

handleVideo(){
   const link = document.createElement('a');
   link.href = this.sourceUrl;
   link.target = '_blank';
   link.click();
   //或者
   window.open(this.sourceUrl, '_blank');
},

原因分析：唯一区别就是从当前窗口去跳转一个是没有从当前窗口访问，怀疑是目标地址有什么安全策略的判断，可能是对document.referrer进行了拦截判断。

关于referrer：Document.referrer - Web API | MDN (mozilla.org)

所以有了如下解决方案：去除referrer

document.referrer这个字段记录了，项目是怎么被打开的（是直接浏览器地址栏打开，还是从某个地方跳转过来打开的）
可以统计访问源，或做一些控制，或者可以返回到访问源

<head>
    ......

    <!-- 方法一： 不带着referrer -->
    <!-- <meta name="referrer" content="no-referrer"> -->
.....
</head>

<!-- 方法二： 在js中操作 -->
handleVideo(){
    const link = document.createElement('a');
    link.href = this.sourceUrl;
    // 去除referrer
    link.rel="noopener noreferrer"
    link.target = '_blank';
    link.click();
    //或者
window.open(this.sourceUrl, '_blank', 'noopener,noreferrer');
},