Solve cross-domain problems through cors protocol in springboot
1. For projects with front-end and back-end separation, if the front-end project and the back-end project are deployed in two different domains, cross-domain problems will inevitably arise.
For cross-domain problems, the first solution we may think of is jsonp, and I have basically dealt with cross-domain problems in the past.
However, the jsonp method also has shortcomings. Whether it is for the front end or the back end, the writing method is different from our usual ajax writing method, and the back end also needs to be changed accordingly. In addition, the jsonp method can only pass parameters through the get request method. Of course, there are other shortcomings. For this, I am not in a hurry to use the jsonp method to solve the cross-domain problem. I searched for other methods on the Internet. This is what this article mainly talks about, solving cross-domain problems through the cors protocol in springboot.
2. Cors protocol
New in H5: Cross-Origin Resource Sharing. Through it, our developers (mainly referring to back-end developers) can decide whether resources can be accessed across domains.
cors is a w3c standard, which allows browsers (currently not supported below ie8) to send xmlHttpRequest requests like our servers of different origins, and we can continue to use ajax for request access.
For specific articles about the cors protocol, you can refer to this article http://www.ruanyifeng.com/blog/2016/04/cors.html , which is quite good.
3. How to solve cross-domain problems through cors protocol in springboot
The springmvc4.2 version adds support for cors.
At present, the projects I do are basically developed with springboot, so I will post the use in springboot here.
@Configuration
public class MyWebAppConfigurer extends WebMvcConfigurerAdapter{
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("*")
.allowedMethods(RequestMethod.POST.name())
.allowCredentials(true)
.maxAge(60 * 30);
}
}The above is for global configuration. If you want to be more detailed, you can also use the @CrossOrigin annotation in the controller class.
@CrossOrigin(origins = "*", allowedHeaders = "*", allowCredentials = "true", maxAge = 60 * 30)
@PostMapping(value = "/v1/crossplatform/order/state", consumes = MediaType.APPLICATION_JSON_UTF8_VALUE, produces = "text/html;charset=UTF-8")In this way, you can specify that "/v1/crossplatform/order/state"' can handle cross-domain requests.
4. Front-end js code example
$.ajax({
url: 'http://10.82.13.116:8080/zlgxwl/v1/crossplatform/order/state',
type: 'POST',
contentType: "application/json",
xhrFields: {
withCredentials: true
},
crossDomain: true,
data: JSON.stringify(params),
success: function (res) {
}
})Where withCredentials: true means that the browser will attach cookie information to the server; allowCredentials = true on the server side, both conditions are indispensable, otherwise even if the server agrees to send cookies, the browser will not be able to obtain it.