springboot中ajax跨域和session共存问题

最新推荐文章于 2020-12-08 22:33:38 发布

15810356216

最新推荐文章于 2020-12-08 22:33:38 发布

阅读量754

点赞数

分类专栏： springboot

本文链接：https://blog.csdn.net/L15810356216/article/details/89362965

版权

springboot 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言：目前大多数的项目都是采用前后端分离的方式架构，后端常用springboot框架比较多。

问题：前端注册ajax发送请求验证码接口，后台接口中发送验证码并保存数据到缓存session中；然后又调用ajax发送请求-注册接口，在注册接口比较前台传过来的值和session中存的值；而从session中取不到值，为null？

原因：前后端交互的一个跨域的问题。这个注解（@CrossOrigin）类默认并没有开启对session跨域的一个共享，所以需要自己去开启对跨域参数的一个session授信，在@CrossOrigin的参数里，手动添加2个参数，允许跨域传输所有的header参数，并支持session共享。

解决：

1、首先接口类上加注解

@CrossOrigin(allowCredentials="true",allowedHeaders="*")
@RestController
@RequestMapping("/interface/user")
public class IUserInfoController {

2、接口方法请求注解添加（consumes ="application/x-www-form-urlencoded"）

     /**
     *  发送手机验证码
     * @param phone  手机
     * @return
     */
    @GetMapping(value="/sendCode",consumes ="application/x-www-form-urlencoded")
    public Map<String,Object> sendMobileCode(@RequestParam("phone")String phone,HttpSession session){

     /**
     *  注册用户
     * @param phone  手机
     * @param code  手机验证码
     * @param request
     * @return
     */
    @PostMapping(value="/addUser",consumes ="application/x-www-form-urlencoded")
    public Map<String,Object> addUser(@RequestParam("phone")String phone, @RequestParam("code")String code, HttpServletRequest request){

         HttpSession session = request.getSession();

3、前端JS（注意需要添加contentType:"application/x-www-form-urlencoded"和xhrFields:{withCredentials:true}）

//发送验证码
$.ajax({
        type:"get",
        url:""+config.url+"/interface/user/sendCode", //获取验证码
        xhrFields:{withCredentials:true},//前端适配：允许session跨域
        data: data,
        contentType:"application/x-www-form-urlencoded",//表单数据发送编码类型
        success: function(e){ 
        	if (true) {

        	}else{
        		mui.toast(e.data.msg)
        	}
        },
        error: function(){
        	mui.toast('请检查网络状态！')
        }
    })
//注册
$.ajax({
        type:"post",
        url:""+config.url+"/interface/user/addUser", //注册
        data: data,
        contentType:"application/x-www-form-urlencoded",//表单数据发送编码类型
        xhrFields:{withCredentials:true},//前端适配：允许session跨域
        success: function(data){ 
        	if (data.code == 1) {
        		config.storage().setItem('userid',data.id);
        		window.location.href= 'index.html';
        	}else{
        		mui.toast(data.msg)
        	}
        },
        error: function(){
        	mui.toast('请检查网络状态！')
        }
    })