Spring Boot+Vue front and back end separation project cross domain pit I walked through

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 urlRequested page urlCross domainreason
http://www.baidu.com/http://www.baidu.com/index.htmlnoHomology (same protocol, domain name and port number)
http://www.baidu.com/https://www.baidu.com/index.htmlnoDifferent protocols (http/https)
http://www.baidu.com/http://www.wangyi.com/index.htmlnoDifferent primary domain names (wangyi/baidu)
http://www.baidu.com/http://iii.baidu.com/index.htmlnoDifferent subdomains (www/iii)
http://www.baidu.com:8080/http://www.baidu.com:8000/noDifferent 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

        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.

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){

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.

public class CrossConfig implements WebMvcConfigurer {

    public WebMvcConfigurer webMvcConfigurer2(){
        return new WebMvcConfigurer() {
            public void addCorsMappings(CorsRegistry registry) {
                        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")

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

Keywords: Spring Boot

Added by kreoton on Fri, 04 Mar 2022 07:44:41 +0200