來源場景:
@RequestMapping(“/captcha”)接口設置了SESSION_KEY,也能獲取到,但是到了@PostMapping(“/login”)接口就是空的,由于跨域導致的兩個session_id不是同一個
/*** 系統用戶 前端控制器*/
@Controller
@CrossOrigin(origins = "*",maxAge = 3600)// 前端請求發生跨域錯誤,加入這段處理
@RequestMapping("/sys")
public class LoginController {private static final String SESSION_KEY = "captcha";@Autowiredprivate IAdminService adminService;/*** 驗證碼生成* @param request 請求報文* @param response 響應報文* */@RequestMapping("/captcha")public void generate(HttpServletRequest request, HttpServletResponse response) throws Exception {// 英文與數字驗證碼SpecCaptcha captcha = new SpecCaptcha();captcha.setLen(4);// 驗證字符數// 結果String result = captcha.text();// 將結果存儲到session中(由于有些驗證碼沒存儲結果,則需要自己存儲,記得要轉小寫,可參考自帶校驗方法.ver)request.getSession().setAttribute(SESSION_KEY, result.toLowerCase());System.out.println("Session ID in /captcha: " + request.getSession().getId());System.out.println(request.getSession().getAttribute(SESSION_KEY));// 響應到前端captcha.out(response.getOutputStream());}/*** 登錄* @return*/@PostMapping("/login")@ResponseBodypublic R login(HttpServletRequest request,@RequestBody Admin admin){
// 打印調試信息System.out.println("Session ID in /login: " + request.getSession().getId());System.out.println("SESSION_KEY retrieved in /login: " + request.getSession().getAttribute(SESSION_KEY));if(StringUtil.isEmpty(admin.getUserName())){return R.error("用戶名不能為空");}if(StringUtil.isEmpty(admin.getPassword())){return R.error("密碼不能為空");}String code = (String) request.getSession().getAttribute(SESSION_KEY);System.out.println(code);System.out.println(admin.getCaptcha());if (!CaptchaUtil.ver(admin.getCaptcha(), request)) {return R.error("驗證碼錯誤");}//開始數據庫校驗Admin resultAdmin = adminService.getOne(new QueryWrapper<Admin>().eq("userName",admin.getUserName()));if (resultAdmin==null){return R.error("用戶名不存在!");}if (!resultAdmin.getPassword().trim().equals(admin.getPassword())){return R.error("用戶名或密碼錯誤!");}
// String token = JwtUtils.createJWT("-1", "admin", SystemConstant.JWT_TTL);
// Map<String,Object> resultMap=new HashMap<>();
// resultMap.put("token",token);return R.ok();}}
后端跨域配置
/*** web項目配置類*/
@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE","OPTIONS").maxAge(3600);}}
前端使用axios發請求,需要添加
withCredentials: ‘include’, // 確保請求攜帶Cookie
下面是封裝過的axios.js文件
// 引入axios
import axios from 'axios';
let baseUrl="http://localhost:8082/"
let imageUrl = "http://localhost:1111"
// 創建axios實例
const httpService = axios.create({// url前綴-'http:xxx.xxx'// baseURL: process.env.BASE_API, // 需自定義baseURL:baseUrl,withCredentials: 'include', // 確保請求攜帶Cookie// 請求超時時間//timeout: 3000 // 需自定義timeout: 10000
});//添加請求和響應攔截器
// 添加請求攔截器
httpService.interceptors.request.use(function (config) {// 在發送請求之前做些什么// config.headers.token=window.sessionStorage.getItem('token') || '';return config;
}, function (error) {// 對請求錯誤做些什么return Promise.reject(error);
});// 添加響應攔截器
httpService.interceptors.response.use(function (response) {// 對響應數據做點什么return response;
}, function (error) {// 對響應錯誤做點什么return Promise.reject(error);
});/*網絡請求部分*//** get請求* url:請求地址* params:參數* */
export function get(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'get',params: params}).then(response => {resolve(response);}).catch(error => {reject(error);});});
}/** post請求* url:請求地址* params:參數* */
export function post(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params}).then(response => {console.log(response)resolve(response);}).catch(error => {console.log(error)reject(error);});});
}/** 文件上傳* url:請求地址* params:參數* */
export function fileUpload(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params,headers: { 'Content-Type': 'multipart/form-data' }}).then(response => {resolve(response);}).catch(error => {reject(error);});});
}
export function getServerUrl(){return baseUrl;
}
export function getImageUrl(){return imageUrl;
}
export default {get,post,fileUpload
}