vue 使用 iFrame 嵌套带有登录的网站 登录成功 无法跳转

已于 2024-03-15 13:57:07 修改
阅读量787 收藏
点赞数 2
文章标签： 前端
于 2024-03-15 13:56:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/id_EquinoxFlower/article/details/136735796
版权

这个问题有点好玩，当时做的时候没想起来，哎不说讲一下问题

1.项目在使用iFrame标签嵌套其他，网址或者自己的网址的时候如果没有登录只是浏览是没有问题的

2.如个你使用Frame标签嵌套的网址是带有登录的需要注意两个网站是不是在统一域名下面如果在就可以正常登录 ， 如果不在的话会出现登录成功但是无法跳转的问题

LZQ <=小氣鬼=>
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
解决iframe嵌套项目无法登录的问题
anderlaw的博客
04-11 1万+
以iframe标签嵌入一个现有的项目到网站中，嵌入的项目无法正常登录，直接在浏览器地址栏输入url并登录是正常的。于是开始探索... 问题分析 由于后续接口提示401，判断是登录接口鉴权失败导致的，于是观察登录接口的请求响应，发现了端倪： 翻译为大白话就是：写入Cookie失败。原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！ 这个提示包含了两个信息： 设置cookie时有个连带的SameSite属性 .
vue3使用ifame标签引用html页面,如何vue页面向html页面传递数据
Gik99的博客
03-05 937
vue3使用ifame标签引用html页面,如何vue页面向html页面传递数据
前端内嵌iframe网页单点登录的三种方式
最新发布
大雾起了清晨
05-12 1452
方法一：共享sessionStorage或localStorage方法二：设置内嵌iframe的url参数方法三：通过父子页面通信postMessage扩展：同源网页
如何维持前端页面中内嵌iframe的登录态
ivan5277的博客
04-03 1081
总之，关键在于合理地管理和共享用户的身份验证信息，同时确保安全性。注意在实际应用中，应根据安全策略和隐私政策谨慎处理敏感信息，遵循最小权限原则。
vue中如何通过iframe方式加载本地的vue页面
小漠007的专栏
05-31 2523
这个需求一般很少能遇到，只要说去了iframe，很多人就会唾弃。但是有时候的确无法避免使用它，当iframe的特性带来的优势远远高于自己用div模拟的时候。
iframe结构的项目，登录页面嵌套
weixin_33743248的博客
11-07 588
参考：http://www.cnblogs.com/qixin622/p/6548076.html 在网页编程时，我们经常需要处理，当session过期时，我们要跳到登陆页面让用户登陆，由于我们可能用到IFrame框架，所以我们我登陆页面需要显示在整个页面，而不是一个IFrame中，大部分的网友是用下面的代码进行实现的。 在过滤器中写如下代码： printWriter...
vue 用iframe嵌套其它项目页面针对跨域与传值页面跳转失败处理
周家大小姐
09-23 6339
需求:A项目中有个菜单点击的时候中心内容页面与B项目的一模一样,所以产品想把B项目的页面直接嵌入过来显示,但其中有几个问题要处理就是嵌入B项目时B项目的左侧菜单和头部导航要隐藏,并而在跳时隐式登录,不需要用户重新在B项目又登录一次。B项目在全局路由router.beforeEach中接收并在里面处理自动登录与跳转的问题。加载Iframe成功前先获取A项目用户ID这里是写的模拟的;
在iframe中，地址完全正确，但却跳转不过去
wu_dada的博客
11-20 2579
在制作前端网页时，使用iframe链接header公共部分时，路径虽然完全正确，但却已然跳转不过来。 因为在编辑器内部打开时，服务器是针对一个项目打开的，所以出现这种情况时，可能是因为你的文件夹位置放置不正确，因为，最外面的那个文件夹并不是你所建的那个项目，你可能把你的项目放到了一个文件夹中，而你的头部则是与你的项目处于同一级文件夹状态。
踩坑vue中嵌套iframe项目，嵌套在iframe中的项目无法登录！
jieyucx的博客
04-26 3643
该属性一般是随着Set-Cookie响应头设置的，语法为response.setHeader(“Set-Cookie”,“CookieName=CookieValue;由于后续接口提示401，判断是登录接口鉴权失败导致的，原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！以iframe标签嵌入一个现有的项目到网站中，嵌入的项目无法正常登录，直接在浏览器地址栏输入url并登录是正常的。
vue 登录界面无法跳转问题
sunlizhen的专栏
10-27 7959
1.在试着用vue写一个登录页面，已经调试好了，登录成功后，跳转到主页面。但是加了拦截器后，不会跳到主页面 { path: '/', name: 'Home', meta:{isLogin:true},// 添加该字段，表示进入这个路由是需要登录的 component: Index }, // 路由守卫 router.beforeEach((to,from,next)=>{ if(to.matched.some(res=>res.meta.isLogin)){//判.
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”...
vue下iframe标签页,切换标签页,iframe不重载
12-05
vue项目中一个模板组件，不同iframe的src地址，对应不同的路由，不同标签页，且切换标签页不重载。这种客户的要求是特例在网上没有，所以纯自行手码。由于项目在vuex保存了标签页，所以初次进入该组件时，调用了一次...
vue 页面tabs切换,替换iframe
10-25
标题提到的“vue 页面tabs切换,替换iframe”，就是指用Vue的特性和组件来实现更加现代和灵活的Tab切换功能，避免使用iframe。下面将详细介绍如何使用`vue-router`的`router-view`和`keep-alive`来实现这一目标。 ...
div嵌套html不用iframe
09-28
在网页设计和开发中，有时候我们需要在不使用`iframe`元素的情况下将一个页面的内容嵌入到另一个页面中。`iframe`虽然提供了这种功能，但有时可能会带来一些问题，如加载速度慢、SEO优化困难等。在这种情况下，我们...
解决第三方使用iframe内嵌页面时无法正常登录访问的问题
qq_28013889的博客
11-22 9022
主要解决了谷歌浏览器高版本浏览器88或以上,引用iframe内嵌页面,因为浏览器的安全策略存在跨域，无法使用cookie获取到token信息，导致页面加载不出来的问题
Vue前端嵌套系统实现在iframe框架中传值给子系统实现单点登录或其他操作
w1060436872的博客
02-01 1562
将token或其他值传入子系统中，使得在iframe加载后自动登录或者传递信息的功能
vue组件嵌入iframe与其他系统页面跨域通信
weixin_42520314的博客
07-16 7988
今天在项目中用到在组件中嵌入iframe调用另一个vue项目中的组件页面 <template> <div style="width:100%;height:100%"> <iframe class="el_sence_table" ref="senTable" frameborder="0" height...
深入浅出iframe（+ iframe嵌套第三方页面跨域带cookie问题）
qq_45859670的博客
08-30 3666
iframe 标签规定一个内联框架。内联框架就是在一个页面中嵌入另一个页面。由于 iframe 可能在某些方面不符合标准网页设计的理念，已经被HTMLl5抛弃，目前的HTML5不再支持它了。
vue localhost 已拒绝连接
06-28
### 回答1： 这个错误提示意味着你的 Vue 项目无法在本地主机上运行。可能是因为你的本地主机没有正确配置或者你的 Vue 项目没有正确启动。你可以检查一下你的本地主机的网络设置，确保它能够连接到互联网。同时，你也可以检查一下你的 Vue 项目的配置文件，确保它正确地设置了本地主机的地址和端口号。如果你还是无法解决这个问题，建议你查看一下 Vue 的官方文档或者向社区寻求帮助。 ### 回答2： Vue.js 是一款流行的前端 JavaScript 框架，它的开发环境需要在本地安装 Node.js 和 Vue CLI。当我们在使用 Vue.js 进行本地开发时，有时候会遇到错误提示“localhost 已拒绝连接”。这是由于一些原因导致的问题，下面我们来分析一下可能的原因和解决方法。 首先，可能是因为本地服务器未运行或已关闭，导致浏览器无法连接到 localhost。此时，我们需要通过命令行进入项目根目录，并输入“npm run serve”命令，以启动本地服务器。 其次，可能是因为防火墙禁止了本地服务器的访问。在 Windows 操作系统中，我们需要进入“控制面板”>“系统和安全”>“Windows Defender 防火墙”>“允许应用通过Windows 防火墙”，然后找到 Vue CLI 并勾选其允许通过防火墙的选项。在 Mac 操作系统中，则需要进入“系统偏好设置”>“安全性与隐私”>“防火墙”>“防火墙选项”，然后添加 Vue CLI 并勾选其允许通过防火墙的选项。 还有可能是路由配置错误或其他程序错误导致的问题。这时，我们需要检查路由配置、组件代码和 Vue.js 版本等相关代码，确保其正确无误。如果无法自己解决问题，可以尝试在 Vue.js 社区或其他技术社区求助，或者咨询专业的开发人员。 综上所述，当遇到“localhost 已拒绝连接”的错误提示时，我们需要先检查本地服务器是否正常运行，并检查防火墙设置是否正确。如果这些都没有解决问题，就需要检查代码是否存在问题，或者寻求专业人员的帮助。只要耐心细致地排查，就一定能够解决这个问题，顺利进行 Vue.js 的开发工作。 ### 回答3： Vue.js 是一款流行的前端框架，它极大地简化了前端开发过程，但在使用过程中可能会遇到 "vue localhost 已拒绝连接" 的问题。这个问题通常是由于端口被占用或者未正确启动导致的，下面详细讲解如何解决这个问题。 首先，我们需要确定是否解决端口被占用的问题。我们可以通过打开终端并输入 `lsof -i:<port-number>` 的命令来查看端口是否已被占用，其中 `<port-number>` 是指 Vue 项目运行的端口号。如果显示有进程占用了该端口，则需要终止占用该端口的进程或者更改该进程的端口号。我们可以通过 `kill <PID>` 的命令来杀死该进程，其中 `<PID>` 是指占用该端口的进程号。如果你不知道进程号，可以使用 `lsof -i:<port-number>` -t 的命令来获取该进程的 PID。 如果您确定没有端口被占用的问题，那么就需要检查您的 Vue 项目是否已经正确启动了。首先，我们需要进入 Vue 项目的根目录，并且运行 `npm run serve` 启动 Vue 项目。如果您使用的是 yarn，那么运行 `yarn serve` 启动项目。如果在启动过程中出现错误，错误信息会显示在终端上，您可以根据提示信息调整您的代码或配置文件，直到成功地启动项目。 如果所有的检查都没有发现问题，那么还有可能是由于浏览器缓存问题导致的。我们可以尝试清除浏览器缓存并重新启动 Vue 项目来解决该问题。 总的来说，"vue localhost 已拒绝连接" 的问题通常是由于端口被占用或者Vue 项目未正确启动导致的。通过对以上可能出现的问题进行逐一排查，您可以快速定位问题并解决它。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LZQ <=小氣鬼=>

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值