SpringBoot+Vue前后端分离项目跨域/sessionId获取不同问题

---

在写一个 SpringBoot+Vue 的前后端分离项目时出现了跨域问题：

Access to XMLHttpRequest at 'http://localhost:8088/home/login' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决办法：

在Controller类上加上一个注解：

@CrossOrigin         // 表示该Controller类下的所有方法都允许跨域

但紧接着就又出现了问题:

前端:

后端:

Resolved [org.springframework.web.bind.ServletRequestBindingException: Missing session attribute 'USER_INFO_SESSION_KEY' of type xxxx]

---

说明: 找不到session中的用户登录信息...

后来查看了每次请求时的sessionId,发现都不一样...

也就是说我获取用户登录信息的sessionId和登录时存放用户信息的sessionId不同,所有也就拿不到了!

---

解决办法:

1. 在后端配置跨域过滤器

package com.example.demo.interceptor;

import javax.servlet.*;

import javax.servlet.annotation.WebFilter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

// 配置跨域过滤器
@WebFilter(urlPatterns = "/*", filterName = "AppFilter")
public class AppFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override

    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws ServletException, IOException {

        HttpServletRequest req = (HttpServletRequest) servletRequest;

        HttpServletResponse resp = (HttpServletResponse) servletResponse;

        String origin = req.getHeader("Origin");

        if(origin == null) {

            origin = req.getHeader("Referer");

        }

        resp.setHeader("Access-Control-Allow-Origin", origin);//这里不能写*，*代表接受所有域名访问，如写*则下面一行代码无效。谨记

        resp.setHeader("Access-Control-Allow-Credentials", "true");//true代表允许携带cookie

        chain.doFilter(servletRequest,servletResponse);

    }

    @Override
    public void destroy() {

    }
}

2. 在启动类上加一个注解

@ServletComponentScan
public class DemoApplication {

   public static void main(String[] args) {
      SpringApplication.run(DemoApplication.class, args);
   }

}

3. 在前端发送axios请求时加一个配置项

import axios from "axios";
axios.defaults.withCredentials = true;     // 添加这个配置项

如果是Ajax请求,那么添加如下配置项:

xhrFields: { withCredentials: true, }

---

此时问题就解决了