前后端分離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了