问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话.

在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, 既然每次请求都是一个新的会话, 那我们去获取session的时候自然就是null了.

解决办法如下:

环境:

vue 2.0

springboot 2.1.6

一、前端部分

1.  在vue引入axios的位置添加以下代码

import axios from 'axios'
axios.defaults.withCredentials = true;// 允许跨域携带cookie

二、后台部分

1. 新建一个FilterConfig类, 编写一个拦截器类

/**
* 允许跨域请求
* @author Administrator
*
*/
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.*;
@Component
public class FilterConfig implements HandlerInterceptor{ public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
throws Exception {
} public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2)
throws Exception {
} public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object arg2) throws Exception { response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));//支持跨域请求
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");//是否支持cookie跨域
response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");//Origin, X-Requested-With, Content-Type, Accept,Access-Token
return true;
}
}

2. 在创建一个SpringMVCConfig类, 请用拦截器

/**
* 启用跨域配置
* 编写SpringMVCConfig类使用FilterConfig中的配置
* @author Administrator
*
*/
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringBootConfiguration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@SuppressWarnings("deprecation")
@SpringBootConfiguration
public class SpringMVCConfig extends WebMvcConfigurerAdapter{
@Autowired
private FilterConfig filterConfig; public void addInterceptors(InterceptorRegistry registry){
registry.addInterceptor(filterConfig).addPathPatterns("/**");
}
}

问题解决, 重启工程后我们再次打印每次请求的sessionID就会发现sessionID是一致的, 当然也就可以获取我们存入session的内容了.

System.out.println(request.getSession().getId());

解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题的更多相关文章

  1. Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...

  2. docker-compose 部署 Vue+SpringBoot 前后端分离项目

    一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...

  3. 云计算:Ubuntu下Vue+Springboot前后端分离项目部署(多节点)

    一.机器准备 首先准备三台机器: 我是一台WINDOWS系统主机,在WINDOWS里的 VMware 中安装两台Ubuntu系统虚拟机 如果你的虚拟机只有 CentOS,可以参考这篇文章:https: ...

  4. vue+springboot前后端分离实现单点登录跨域问题处理

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登 ...

  5. 基于Vue的前后端分离项目实践

    一.为什么需要前后端分离 1.1什么是前后端分离  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功 ...

  6. 《论vue在前后端分离项目中的实践之年终总结》

    我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由.验证.ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项 ...

  7. 【转】python+django+vue搭建前后端分离项目

    https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...

  8. python+django+vue搭建前后端分离项目

    以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...

  9. .netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

    框架采用.NetCore + Vue前后端分离,并且支持前端.后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增 ...

随机推荐

  1. viewPager作为RecyclerView的itemView出现的显示问题

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/174 ViewPager作为RecyclerView的it ...

  2. form-data、x-www-form-urlencoded、raw、binary的区别(非原创)

    文章大纲 一.form-data介绍二.x-www-form-urlencoded介绍三.raw介绍四.binary介绍五.参考文章 一.form-data介绍 http请求中的multipart/f ...

  3. 38-docker managed volume

    docker managed volume 与 bind mount 在使用上的最大区别是不需要指定 mount 源,指明 mount point 就行了.还是以 httpd 容器为例: 我们通过 - ...

  4. Python安装常见问题(1):zipimport.ZipImportError: can't decompress data(此问题不解决pip安装不成功)

    在CentOS以及其他的Linux系统中遇到安装包安装错误的原因,大多数都是因为缺少依赖包导致的,所以对于错误:zipimport.ZipImportError: can’t decompress d ...

  5. 【转载】C++编译过程

    C++编译过程 C++ 编译过程在介绍编译器之前,先简单地说一下 C++ 的编译过程,以便理解编译器的工作.编译(compiling)并不意味着只创建仅仅一个可执行文件.创建一个可执行文件是一个多级过 ...

  6. 《数据挖掘导论》实验课——实验一、数据处理之Numpy

    实验一.数据处理之Numpy 一.实验目的 1. 了解numpy库的基本功能 2. 掌握Numpy库的对数组的操作与运算 二.实验工具: 1. Anaconda 2. Numpy 三.Numpy简介 ...

  7. ES6 class类中定义私有变量

    ES6 class类中定义私有变量 class类的不足 看起来, es6 中 class 的出现拉近了 JS 和传统 OOP 语言的距离.但是,它仅仅是一个语法糖罢了,不能实现传统 OOP 语言一样的 ...

  8. WinCC的画面使用技巧

    以下内容以VB脚本为主,仅在VB脚本无法实现的功能中使用C脚本. 画面导航 画面导航的作用是打开起始画面.前一张画面和后一张画面等,只能用C脚本实现. 打开起始画面:    OpenHomePictu ...

  9. 【Sublime Text】sublime修改默认浏览器及使用不同浏览器打开网页的快捷键设置

    #第一步:安装SideBarEnhancements插件 下载插件,需要“翻墙”,故提供一下该插件的github地址:https://github.com/titoBouzout/SideBarEnh ...

  10. git分支合并解决冲突

    git分支合并,解决冲突 1.手动解决冲突 手动解决冲突,需要使用编辑器,把所有文件中出现的冲突地方修改,然后再添加到暂存区再提交 >>>>>>brancha so ...