最近專案需要在登錄的時候加上圖片驗證碼，然后網上隨便找了一份生成驗證碼的方法，介面測驗是沒問題的。但是在與前端對接時，出現了每次請求session不一致的問題，后面找到了解決方案：
前端加上：
axios.defaults.withCredentials = true;
后端加上跨域配置(加在網關層）：
private CorsConfiguration corsConfiguration() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.setAllowCredentials(true);
return corsConfiguration;
}
/**
* 跨域配置
*/
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", corsConfiguration());
return new CorsFilter(source);
}
重點： vue前端不要在本地測驗，一定要放在服務器上面去。不然還是會session不一致。切記切記，這是我踩的巨坑.
uj5u.com熱心網友回復：
可以放在本地測驗uj5u.com熱心網友回復：
邏輯不對，應該避免使用Session，
下發驗證碼時，同時下發一個對應的Token，
前端在提交驗證碼時，同時提交對應的Token，后端根據Token取得對應的服務端驗證碼，與前端的驗證碼對比
uj5u.com熱心網友回復：
每次都在服務器測驗很麻煩的，最好是前端開發者也安裝eclipse，同步后端代碼，自己編譯再啟動Tomcat，前端就能實作本地開發測驗了
uj5u.com熱心網友回復：
是后臺生成的驗證碼圖片，直接回傳圖片的uj5u.com熱心網友回復：
圖片也可以下發Cookie，Token放Cookie里，
另外，為了避免跨域的麻煩，也可以回傳json串，圖片作為base64字串回傳
uj5u.com熱心網友回復：
不錯哦！哈哈哈哈哈哈
uj5u.com熱心網友回復：
開發的時候前端配置下代理服務器就行了uj5u.com熱心網友回復：
你這個解決的是跨域問題吧，不是session不一致問題，經過網關層轉發后很可能會session不一致，包括集群環境下，session會話沒有長時間保持也會出現session不一致的情況。我以前也遇到過，做了簡單處理，頁面生成隨機的uuid，請求驗證碼圖片的時候帶上這個uuid，后臺生成驗證碼時關聯這個uuid，前端請求驗證驗證碼時把uuid和驗證碼都傳過去，也就是不用session。這種做法是一種偽token的方式，token是在前端生成的，而不是在后臺生成的。也可以在頁面加載時先從后臺獲取頁面token再進行處理
uj5u.com熱心網友回復：
用spring cloud為何還要用Session，你的邏輯還停留在單機上了，我的解決方案是：生成驗證碼，然后生成一盒驗證碼的key，將驗證碼key作為redis的key將驗證碼存放到redis中，然后驗證碼生成圖片，將key和圖片的base64字串，用json的形式回傳前端，然后前端顯示，提交回來以后根據前端提交的key去redis中取出驗證碼直接比對即可uj5u.com熱心網友回復：
問題一：axios.defaults.withCredentials = true;
與
corsConfiguration.addAllowedOrigin("*");
沖突，會有跨域問題；
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/14399.html
標籤：Web 開發