前后端分离以及session如何处理?跨域怎么办?

说明

前一阵子,用vue+springboot相关的项目,今天来说一下免得忘记,关于session和cookie的基本知识,参考之前的文章session 跟 cookie关系 ,session共享,单点登录实现原理及实战
直接借用一张图,说白了之前前后端都是一个运用现在变成两个了,功能明确,易于扩展。前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务;
核心:前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互
在这里插入图片描述

首先弄明白session从哪里来?

session这东西是开发语言(php/asp/jsp/servlet)的一个功能,就是用户的一个对话区。那么我们常见的有tomcat。weblogic,jetty,jboss,websphere这些东西是有session的,而我们常用的nginx,HA等主要用来做负载的本身不具备session功能,他主要用来做内部转发,负载均衡等

其次搞明白跨域怎么回事?

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。
注意是浏览器搞的鬼
那么不跨域条件是什么?
同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域;

假设有两个网站,A网站部署在:http://localhost:81 即本地ip端口81上;B网站部署在:http://localhost:82 即本地ip端口82上。现在A网站的页面想去访问B网站的信息,这时不满足t同源策略会跨域
在这里插入图片描述

分离后存在的问题?

首先就是session的问题

  • 后台运行可能多个实例这时一个运用登陆了,但是下次请求负载到另外一台了,这时session不存在,需要重新登陆,那么如何解决?
    大家可参考之前的文章session 跟 cookie关系 ,session共享,单点登录实现原理及实战来解决这个问题

  • 前台用了vue如何将cookie中信息带到后台让它找到对应的session?
    因为用了vue的axios我们在发送请求时需要设置withCredentials=true;

  this.$axios.post('http://localhost:8080/test/xxx/xxxx', {}, {
              headers: {
                "Content-Type":"application/json;charset=utf-8"
              },
              withCredentials : true
          }).then(function(response) {
              // 这里是处理正确的回调
              let result = response.data.result;
              if (0 == result) {
                self.menulist = response.data.item.menulist;
              } else if (11 == result || 9 == result) {
                self.$router.push('/login');
              } else {
                console.log(response.data);
              }

          }).catch( function(response) {
              // 这里是处理错误的回调
              console.log(response)
          });
          以上两个条件缺一不可特别是在分布式多实例的情况下!

其次就是跨域问题

  • 前后端交互不符合同源策略这时前端访问后台接口就会出现跨域问题;
    解决方法,有很多jsonp,设置服务端响应头等
    这里就用nginx做代理,vue中同样也设置代理,这样vue项目打包后我们只要在nginx中配好相应的代理地址,vue打包好后访问的代理就转到了nginx上进行真正的转发!
    为什么nginx可以解决跨域?
    你没发现用了nginx后都是在同一个域下访问的吗?所以nginx统一了访问入口,内部转发,但浏览器并不知道,所以就做到了!

在这如何最大化利用前后端分离的优势?

  • 答案是必须的,但最核心的是使用mock数据,前后大虾们定好数据格式,之后便各自开发,然后后台运用swagger进行调式即可,效率会快很多
  • 3
    点赞
  • 0
    评论
  • 15
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

class Session { //mysql的主机地址 const db_host = "localhost"; //需要第三方指定ip地址 //数据库用户名 const db_user = "root"; //需要第三方指定自己的用户名 //数据库密码 const db_pwd = ""; //需要第三方指定自己的库据库密码 //数据库 const db_name = "thinkphp"; //需要第三方指定数据库 //数据库表 const db_table = "tbl_session"; //需要第三方指定数据表 //mysql-handle private $db_handle; //session-lifetime private $lifeTime; function open($savePath, $sessName) { // get session-lifetime $this--->lifeTime = get_cfg_var("session.gc_maxlifetime"); // open database-connection $db_handle = @mysql_connect(self::db_host, self::db_user, self::db_pwd); $dbSel = @mysql_select_db(self::db_name, $db_handle); // return success if(!$db_handle || !$dbSel) return false; $this->db_handle = $db_handle; return true; } function close() { $this->gc(ini_get('session.gc_maxlifetime')); // close database-connection return @mysql_close($this->db_handle); } function read($sessID) { // fetch session-data $res = @mysql_query("SELECT session_data AS d FROM ".self::db_table." WHERE session_id = '$sessID' AND session_expires > ".time(), $this->db_handle); // return data or an empty string at failure if($row = @mysql_fetch_assoc($res)) return $row['d']; return ""; } function write($sessID, $sessData) { // new session-expire-time $newExp = time() + $this->lifeTime; // is a session with this id in the database? $res = @mysql_query("SELECT * FROM ".self::db_table." WHERE session_id = '$sessID'", $this->db_handle); // if yes, if(@mysql_num_rows($res)) { // ...update session-data @mysql_query("UPDATE ".self::db_table." SET session_expires = '$newExp', session_data = '$sessData' WHERE session_id = '$sessID'", $this->db_handle); // if something happened, return true if(@mysql_affected_rows($this->db_handle)) return true; } else // if no session-data was found, { // create a new row @mysql_query("INSERT INTO ".self::db_table." ( session_id, session_expires, session_data) VALUES( '$sessID', '$newExp', '$sessData')", $this->db_handle); // if row was created, return true if(@mysql_affected_rows($this->db_handle)) return true; } // an unknown error occured return false; }
©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值