跨域引起的两个接口的session_id不是同一个

来源场景:
@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";
    @Autowired
    private 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")
    @ResponseBody
    public 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 {
    @Override
    public 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
}
  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值