a标签跳转新地址无法访问，但手动输入新地址可以访问

最新推荐文章于 2024-05-29 08:57:45 发布

柏睿奕行

最新推荐文章于 2024-05-29 08:57:45 发布

阅读量452

点赞数 3

文章标签：前端框架

本文链接：https://blog.csdn.net/m0_58750788/article/details/137391913

版权

问题描述

最近遇到一个有意思的问题，项目中有一个地方，点击需要跳转到一个新的域名地址
笔者使用a标签做跳转，跳是跳过去了，可是跳过去以后，反而打不开了，显示403佛伯乐
蛤？

大致这样的代码：

<a href="http://abcdefg.com" target="_blank">点击跳转</a>

原因分析

既然跳过去出问题，那么猜测是另外一个项目做了拦截
于是就去问问之前负责过http://abcdefg.com这个项目的同事
被告知：
为了安全考虑，对document.referrer进行了拦截判断（前后端均可拦截操作）
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/ref...
了解，既然直接跳过去，会把referrer带着，那么就想办法，不带着就行了

5种解决方案

from

推荐下面的解决方案三

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>from</title>
    <!-- 解决方案一 禁内容referrer -->
    <!-- <meta name="referrer" content="never"> -->

    <!-- 解决方案二 不带着referrer -->
    <!-- <meta name="referrer" content="no-referrer"> -->
</head>

<body>
    <!-- 解决方案三 a标签加rel属性控制 -->
    <a href="http://127.0.0.1:5502/referrer.html" target="_blank" rel="noopener noreferrer">点击跳转</a>

    <!-- 解决方案四 使用referrerpolicy属性控制 -->
    <!-- <a href="http://127.0.0.1:5500/referrer.html" target="_blank" referrerpolicy="no-referrer">点击跳转</a> -->

    <!-- 解决方案五 换成window.open并注入js执行代码 -->
    <!-- <button>点击跳转</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = () => {
            window.open('javascript:window.name;', `
                <script>location.replace("http://127.0.0.1:5502/referrer.html")<\/script>
            `)
        }
    </script> -->
</body>

</html>

referrer

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>referrer</title>
</head>

<body>
    <h2></h2>
    <script>
        let referrer = document.referrer
        let h2 = document.querySelector('h2')
        if (referrer) {
            h2.innerHTML = '不允许从别的地方跳转过来访问'
        } else {
            h2.innerHTML = '欢迎直接访问'
        }
    </script>
</body>

</html>