前后端分离session不一致问题

前端VUE.js

后端SSM

问题描述：

该项目的登录先由后台生成一验证码返回给前端，并保存在session中，不过当前端登录时，后台会报 NullPointerException，看前端的请求头才发现前端的请求中并没有携带cookie信息，而且会发生几次请求；

开始我们以为这就是经典的跨域问题，然后我就去了解了跨域

什么是跨域

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 

域名： 　

• 主域名不同: http://www.baidu.com/index.html –>http://www.sina.com/test.js
• 　子域名不同: http://www.666.baidu.com/index.html –>http://www.555.baidu.com/test.js 　
• 域名和域名ip: http://www.baidu.com/index.html –>http://180.149.132.47/test.js
• 端口：http://www.baidu.com:8080/index.http->http://www.baidu.com:8081/test.js
• 协议：http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js

备注： 　

1. 端口和协议的不同，只能通过后台来解决 　

2. localhost和127.0.0.1虽然都指向本机，但也属于跨域

为什么会有跨域

因为浏览器的同源策略：

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

不管怎么样，我们都是需要同源策略的，那么如何解决跨域了，前后端都有自己的解决方案，

解决跨域

前后端都有自己的解决方案，前端有jsonp专门用于解决跨域，不管只能使用get请求，很不方便；所以后端解决跨域会方便一些

后端在spring-mvc.xml配置跨域

 <!-- 跨域设置 -->
    <mvc:cors>
        <mvc:mapping path="/**"
                     allowed-origins="*"
                     allowed-methods="*"
                     allow-credentials="true"
                     allowed-headers="*"/>
    </mvc:cors>

跨域现在是没问题的测试了许多，使用的是axios插件

在man.js中需要如下配置

// 网络请求框架
import axios from 'axios'
axios.defaults.withCredentials=true //让ajax携带cookie
Vue.prototype.$http = axios     // 这样设置就可以在组件内用 this.$http 使用axios了
axios.defaults.baseURL = '' //初始化基础地址

这样就能够实现当前请求都是同一个session了