Spring Boot+Vue front and rear end separation project: the pit I walked through

1, Cross domain problem

Homology policy is a kind of agreement. It is the core and basic security function of the browser. It refers to the security problems that may occur when accessing different homology policies.

2, What is cross domain

When any of the protocol, domain name and port of a request url is different from the current page url, it is cross domain

Current page url	Requested page url	Cross domain	reason
http://www.baidu.com/	http://www.baidu.com/index.html	no	Homology (same protocol, domain name and port number)
http://www.baidu.com/	https://www.baidu.com/index.html	no	Different protocols (http/https)
http://www.baidu.com/	http://www.wangyi.com/index.html	no	Different primary domain names (wangyi/baidu)
http://www.baidu.com/	http://iii.baidu.com/index.html	no	Different subdomains (www/iii)
http://www.baidu.com:8080/	http://www.baidu.com:8000/	no	Different port numbers (8080 / 8000)

3, Cross domain solutions

1. Vue request

I use Spring Boot and Vue here. Vue uses axios to send asynchronous requests. After axios is introduced, it sends asynchronous requests

 axios({
        method: "post",
        url: "/admin/login",
        data: {
          username: this.username,
          password: this.password,
        },
      })

2. Boot receive data spring

The @ CrossOrigin annotation can be used in SpringBoot to help us solve the cross domain problem caused by the front-end accessing the back-end.

@RestController
@CrossOrigin
@RequestMapping("/admin")
public class LoginController {
	....
}

If the request header is not set in the vue and the receiving method of the back end is like this, 400 may appear.

    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public Result loginPage(@RequestParam("username") String username,@RequestParam("password") String password){
	.......
	}

If it appears, it can be modified in this way. If it doesn't exist, it doesn't need to be managed

    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public Result loginPage(@RequestBody Map map,HttpServletResponse response){

3,cookie

If you want to plant a cookie for the browser, you need to enter main. In the Vue project JS file references the following code

axios.defaults.withCredentials = true

This means that the cookie is received, but after Vue adds this line of code, the @ CrossOrigin annotation doesn't work. The cross domain problem still exists and an error is reported.

In order to solve this problem, I checked many tutorials on the Internet.

One way is to configure cross domain problems in Spring Boot, but I found that if Spring Boot 2.0 is used When allowCredentials is true, allowedOrigins cannot contain the specia

Solution: replace the allowedOrigins is replaced by Allow origin patterns.

@Configuration
public class CrossConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer webMvcConfigurer2(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOriginPatterns("*")
                        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                        .maxAge(3600)
                        .allowCredentials(true);
            }
        };
    }
}

Then add cookie s to the request method, and there is basically no problem.

Refer to the boss's: Problems with SpringBoot upgrade 2.4.0: When allowCredentials is true, allowedOrigins cannot contain the specia