The front-end and back-end projects are separated, and the front-end vue session is null.

The front-end and back-end projects are separated, and the front-end vue session is null.

I am writing a function to manage system user login. After entering the user name and password, you need to enter the verification code for verification. If the input is correct, the login is successful and you enter the system home page.

The logic I wrote is to store the verification code into the session, and compare the correct verification code value from the session with the input verification code.

This can be successfully tested on the interface document, but in vue, the session is null and cannot be obtained.

The log is printed like this:

So the problem should be cross-domain, causing the front end to not get the session

Referring to Springboot+vue front-end and back-end separation, the acquisition of the back-end session is null

Revise

The backend is changed to CorsConfig, which is a configuration file for cross-domain requests

added a sentence.allowedOrigins("http://localhost")

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    

    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
    
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 再次加入前端Origin  localhost！=127.0.0.1
                .allowedOrigins("http://localhost")
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

The front end modifies the axios configuration, I encapsulated it myself, so I changed it here

added a sentencewithCredentials: true

const request = axios.create({
  baseURL: 'http://localhost:8888',
  withCredentials: true
})

success!