跨域不能登录,登录又回到登录首页

        最近遇到个特别特别的需求,跨域登录,用户想在一个大屏上实现多个大屏的展示,每个大屏都需要登录,通过iframe实现,因为跨域,输入用户密码登录系统,又重定向到登录界面(具体四分屏代码可看附件)

<div class="container">
  <iframe src="https://www.baidu.com/" frameborder="1" class="corner-box top-left" onclick="toggleSize(this)"></iframe> 
  <iframe  id  = 'wy' src="https://www.baidu.com/"  frameborder="1" class="corner-box top-right" 
      onclick="toggleSize(this)" security="restricted" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"></iframe> 
  <iframe src="https://www.baidu.com/" frameborder="1" class="corner-box bottom-left" onclick="toggleSize(this)"></iframe> 
  <iframe src="https://www.baidu.com/" frameborder="1" class="corner-box bottom-right" onclick="toggleSize(this)"></iframe> 
</div>


        根本原因是跨域问题造成,什么是跨域,相信很多小伙伴和我一样,最开始是懵的,讲跨域就得讲同源策略(借鉴csdn现有讲得比较详细的一篇文章):

1.什么是同源策略?
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能
所谓同源是指: 协议,域名,端口都相同,就是同源, 否则就是跨域

​ http://www.baidu.com:80/index.html
​ 协议: http/https/…
​ 一级域名: baidu.com/taobao.com
​ 二级域名: www/study/edu/…
​ 端口号: 80/3306/…

// 协议+一级域名+二级域名+端口号都相同, 所以同源
http://www.it666.com:80/index.html
http://www.it666.com:80/detail.html

// 协议不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
https://www.it666.com:80/index.html

// 一级域名不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://www.itzb.com:80/index.html

// 二级域名不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://edu.it666.com:80/index.html

// 端口号不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://www.it666.com:8090/index.html

使用iframe引入平台,因为不同源,子页面没办法设置cookie,所以登录报错,解决方法:

将token可设置在localstorage或者sessionstorage中使用

1.SessionStorage和LocalStorage简介
和Cookie一样, SessionStorage和LocalStorage也是用于存储网页中的数据的

2.Cookie、 SessionStorage、LocalStorage区别
2.1生命周期(同一浏览器下)
Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间
SessionStorage生命周期: 仅在当前会话(窗口)下有效,关闭窗口或浏览器后被清除, 不能设置过期时间
LocalStorage生命周期: 除非被清除,否则永久保存

​ 2.2容量
​ Cookie容量: 有大小(4KB左右)和个数(20~50)限制
​ SessionStorage容量: 有大小限制(5M左右) 
​ LocalStorage容量: 有大小限制(5M左右) 

​ 2.3网络请求
​ Cookie网络请求: 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题
​ SessionStorage网络请求: 仅在浏览器中保存,不参与和服务器的通信
​ LocalStorage网络请求: 仅在浏览器中保存,不参与和服务器的通信

3.Cookie、 SessionStorage、LocalStorage应用场景
Cookie: 判断用户是否登录
LocalStorage: 购物车
sessionStorage: 表单数据

4.注意点:
无论通过以上哪种方式存储的数据, 切记不能将敏感数据直接存储到本地

示例:

// 存储cookie
document.cookie = "myName=hhh;path=/;domain=127.0.0.1;";

//存储sessionStorage,删除sessionStorage,清空sessionStorage
sessionStorage.setItem("age", "34");
sessionStorage.removeItem("age");
sessionStorage.clear();

//存储localStorage,删除localStorage,清空localStorage
localStorage.setItem("name", "lnj");
localStorage.removeItem("name");
localStorage.clear();

四分屏代码块:可把百度地址更换即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Div大小切换</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .container {
      position: relative;
      width: 2560px;
      height: 1440px;
      background-color: #003057;
      overflow: hidden;
    }

    .corner-box {
      position: absolute;
      width: 1280px;
      height: 720px;
      cursor: pointer;
      transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
    }

    .corner-box.top-left { top: 0; left: 0; background-color: #003057; }
    .corner-box.top-right { top: 0; right: 0; background-color: #003057; }
    .corner-box.bottom-left { bottom: 0; left: 0; background-color: #003057; }
    .corner-box.bottom-right { bottom: 0; right: 0; background-color: #003057; }

    .corner-box.large {
      width: 99.9%;
      height: 99.9%;
      z-index: 1;
    }
  </style>
</head>
<body>

<div class="container">
  <iframe src="https://www.baidu.com/" frameborder="1" class="corner-box top-left" onclick="toggleSize(this)"></iframe> 
  <iframe  id  = 'wy' src="https://www.baidu.com/"  frameborder="1" class="corner-box top-right" 
  	onclick="toggleSize(this)" security="restricted" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"></iframe> 
  <iframe src="https://www.baidu.com/" frameborder="1" class="corner-box bottom-left" onclick="toggleSize(this)"></iframe> 
  <iframe src="https://www.baidu.com/" frameborder="1" class="corner-box bottom-right" onclick="toggleSize(this)"></iframe> 
</div>
 
<script>
  function toggleSize(element) {
    if (element.classList.contains('large')) {
      element.style.transform = 'scale(1)';
      element.classList.remove('large');
    } else {
      element.style.transform = 'scale(1)';
      element.classList.add('large');
    }
  }
</script>
</body>
</html>

  • 19
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值