记录--a标签跳转新地址无法访问,但手动输入新地址可以访问

这篇具有很好参考价值的文章主要介绍了记录--a标签跳转新地址无法访问,但手动输入新地址可以访问。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--a标签跳转新地址无法访问,但手动输入新地址可以访问

问题描述

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

大致这样的代码:

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

原因分析

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

4种解决方案

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>

    <!-- 解决方案四 换成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>

可以用vscode的插件live serve跑一下两个html文件,效果更佳

referrer的用处

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

A bad pen is better than a good memory...

本文转载于:

https://juejin.cn/post/7277026974005379107

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--a标签跳转新地址无法访问,但手动输入新地址可以访问文章来源地址https://www.toymoban.com/news/detail-710079.html

到了这里,关于记录--a标签跳转新地址无法访问,但手动输入新地址可以访问的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • EasyNVR平台ONVIF教程:如何通过ODM工具手动输入onvif地址添加通道?

    EasyNVR属于轻量级的视频监控平台,可拓展性强、兼容度高,可支持RTSP/ONVIF协议接入前端设备。在接入前端设备时,可通过自带的ONVIF探测功能,将摄像头设备接入平台,并能实现云台控制,包括转动、变焦、放大等操作。 在实际使用场景中,因受到网络环境因素影响,在E

    2023年04月08日
    浏览(36)
  • vue解决浏览器中跳转新页面缓存上一页表单等内容方法

    在工作中,有可能会遇到需要缓存页面或组件的功能。 情况1 :比如在h5中有个一个50个表单,在填到第40个表单时,需要你去另一个新页面去选择列表项,然后把数据带回来。需要我们不仅把数据带回来还要保留前面已经填好的40个表单内容不被重置。 此功能在微信小程序是

    2024年02月08日
    浏览(55)
  • 在线输入密码访问网站单页,密码验证跳转网站源码

    源码介绍 密码访问单页自定义跳转页面源码 密码访问单页自定义跳转页面,修改了的密码访问单页,添加了js自定义密码跳转页面,需要正确输入密码才能跳转目标网址。

    2024年01月25日
    浏览(104)
  • 微信小程序 表单 选择跳转新页面,选择后,返回上一页面保留原页面已填写的值

    场景: 表单页有很多项需要填写,个别项数据较多,需要跳转到新的页面去选择后,带着结果返回。如图。 此时,想要返回时,已经填写过的内容保留不变,不被清空。 解决: 在下一页去获取上一页data中的数据,并修改,再通过 wx.navigateBack({ delta: 1, }) 返回上一页,页面不

    2024年02月12日
    浏览(40)
  • 海康威视摄像头使用网线连网输入IP地址跳转显示“网站处于联机状态,但未对联机尝试做出反应”

    最近买了一个海康威视的4G枪机摄像头,买回来用4G网卡的话还需要交流量费,就想着连网线,但是产品说明上面并未教如何使用网线连接,于是找客服问了一下。客服给了两个链接。 4G枪机如何激活使用 4G产品如何关闭流量,使用网线连网 但是问题出现了在了最后一步,当

    2024年02月05日
    浏览(213)
  • office跳转OneDrive无法访问解决方法+win10安装正版office

    最近博主在写word时一直用的是WPS,然后被告知老板用的是office怕不兼容,就很坚定地准备在电脑里安装一个office,整个过程充满了喜剧效果,记录一下,为和我一样的萌新避雷。 首先声明! 这个问题的产生是:我以为我按了office,但是我没有安装office!! 如果屏幕前的你不

    2024年02月05日
    浏览(53)
  • 解决浏览器自动将http跳转至https导致无法访问的问题

    目录 解决方式 Chrome浏览器 Safari浏览器 Edge浏览器 注意事项 什么是HSTS? 写在最后         最近在宝塔面板申请免费的SSL证书后,部署证书的80端口下的网站可以通过https正常访问,但其他未部署证书的端口也被强制跳转至https请求,导致浏览器提示不安全从而无法访问。

    2024年02月03日
    浏览(87)
  • 记录无法使用viewBinding引用include标签下的组件的问题

    问题1: include标签 引入的 layout.xml 不在app模块下,并且这个子模块 没有开始Binding功能 。 解决:在子model中启用Binding功能:

    2024年02月13日
    浏览(29)
  • 为什么直接使用IP地址无法访问网站

    在一些情况下,使用IP地址不能直接访问网站的原因主要有以下几种: 虚拟主机技术 现在很多网站采用虚拟主机技术,即在同一个服务器上托管多个不同的网站,这些网站共享同一个IP地址。此时,访问这些网站需要根据 HTTP 请求中的 Host 头信息来确定具体访问哪个网站,而

    2024年02月11日
    浏览(68)
  • vue项目出现此地址,但是访问时显示,嗯… 无法访问此页面localhost 已拒绝连接

    vue项目出现此地址,但是访问时显示,嗯… 无法访问此页面localhost 已拒绝连接。 出现原因:端口号8081被占用 解决办法: 1、先查看端口号,win+R打开命令提示符,输入netstat -an,出现很多端口 如图 2、输入netstat -aon|findstr \\\"8081\\\" 查看 (此处我查看的端口号是8081) 出现如图所

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包