Personal learning series-SpringBoot solves cross-domain problems

Posted May 28, 20203 min read

During the development process, I will always hear about the issue of cross-domain. I haven't understood it in detail. Here I will sort it out in detail.

source

The origin is the protocol, domain name, and port number.

Same Origin Strategy

The same-origin policy is a security feature of the browser. Client scripts from different sources cannot read and write the other party's resources without explicit authorization. So the js script under xyz.com using ajax to read the file data in abc.com will be rejected.

The same-origin policy limits how documents or scripts loaded from the same source can interact with resources from another source. This is an important security mechanism for isolating potentially malicious files.

Cross-domain

A URL is composed of a protocol, domain name, port, and path. If the protocol, domain name, and port of the two URLs are all the same, it means they are the same. Otherwise, as long as the protocol, domain name, and port are different, it is cross-domain.

Cross-domain analysis

Picture.png

Solve cross-domain problems on Spring Boot

1 . Build a 8080 port project

The front-end page allows it to access the interface of port 8081:

<! DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title> Cross-domain testing-port 8080 </title>
</head>
<body>
    <button id = "test"> 8080-> 8081 </button>
</body>
<script src = "https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>
    $("# test"). click(function() {
        $.ajax({
            url:"http://localhost:8081/hello",
            type:"post",
            success:function(res) {
                alert(res)
            }
        })
    });
</script>
</html>

2 . Click the button to test

Firefox browser for cross-domain request interception
Picture.png

3 . Build a 8081 port project

Create a/hello interface

/**
* Cross-domain 8080 port method
* @author zhouzhaodong
* /
@RestController
public class CrossDomainTwoController {

    @RequestMapping("/hello")
    public String hello() {
        return "This is an interface from port 8081!";
    }

}

Click to observe the browser, because there is no configuration, so the error is still reported
Picture.png

4 . Solve cross-domain issues

4.1 Annotate the port with @CrossOrigin

/**
* Cross-domain 8080 port method
* @author zhouzhaodong
* /
@RestController
public class CrossDomainTwoController {

    @CrossOrigin
    @RequestMapping("/hello")
    public String hello() {
        return "This is an interface from port 8081!";
    }

}

Click the button again to find the normal return information.
Picture.png

4.2 Use WebMvcConfigurer object to define global CORS configuration

Comment out @CrossOrigin annotation

/**
* Define global CORS configuration
* @author zhouzhaodong
* /
@Configuration
public class MyConfiguration {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/*")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")
.maxAge(3600);
}
};
}
}

Click the button again to find the normal return information.
Picture.png

That's it!

Source code address

https://github.com/zhouzhaodo...

Personal website

http://www.zhouzhaodong.xyz