With the rise of distributed micro-services, more and more companies choose the mode of development with the front and back end separated when developing Web projects. The front and back end are deployed separately, which makes the division of labor clearer and completely liberates the front end.
We know that the HTTP requests are stateless, now more popular is JWT approach to form a stateless requests, upon request with authentication parameters (token, etc.) before and after the end of the separation is good, does have its downside, separation before and after the development for the first time, the end of the project, will certainly encounter front requested cross-domain problem, how to do with this? Before we get to the solution, it is important to explain why cross-domain and what cross-domain is.
First, why cross-domain?
The same origin policy is restricted by the browser. The Sameoriginpolicy is a convention. It is the core and basic security function of the browser. If the Sameoriginpolicy is missing, the normal functions of the browser may be affected. The Web is built on the same origin policy, and browsers are just an implementation of the same origin policy. The same origin policy prevents javascript scripts in one domain from interacting with content in another domain. Same-origin (that is, in the same domain) means that two pages have the same protocol, host, and port.
What is cross-domain?
When the protocol, domain name, or port of a URL request is different from the current page URL, it is called cross-domain
| Current page URL | Url of the requested page | Whether the cross-domain | why |
|---|---|---|---|
| https://www.52fansite.com/ | https://www.52fansite.com/index.html | no | Same-origin (same protocol, domain name, and port number) |
| https://www.52fansite.com/ | http://www.52fansite.com/index.html | is | Different protocols (HTTPS/HTTP) |
| https://www.52fansite.com/ | https://www.baidu.com/ | is | Different main domain name (52fansite/ Baidu) |
| https://www.52fansite.com/ | https://layui.52fansite.com/ | is | Different subdomains (WWW /layui) |
| https://www.52fansite.com:8080/ | https://www.52fansite.com:8081/ | is | Same-origin (same protocol, domain name, and port number) |
Three, handling cross-domain
1. Add annotations to controller classes or methods
1.1 Class annotation
@RestController
@CrossOrigin(origins = "*")
public class CorsController {
@GetMapping("/cors")
public String testCors(a) {
return "success";
}
}
Copy the code1.2 Annotate the method
@RestController
public class CorsController {
@CrossOrigin(origins = "*")
@GetMapping("/cors")
public String testCors(a) {
return "success";
}
}
Copy the code2. Configure the global cors in the boot class (springboot2.0 is obsolete)
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class.args);
}
@Bean
public WebMvcConfigurer corsConfigurer(a) {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/ *").allowedOrigins("*");
}
};
}
}
Copy the codeReplace with
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class.args);
}
@Bean
public WebMvcConfigurer corsConfigurer(a) {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/ *").allowedOrigins("*");
}
};
}
}
Copy the code3. Register corsFilter
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter(a) {
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
final CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/ * *", config);
return new CorsFilter(source);
}
}
Copy the code