foreword
Recently, when writing a front-end and back-end separation project, I encountered a cross-domain problem that must be solved in front-end and back-end separation. At first, I just added annotations to the Controller layer to @CrossOrigin(allowCredentials = "true")temporarily solve the cross-domain problem. However, when developing the verification code, the verification code characters in the session are still not obtained, and the obtained verification code characters are always null. After debugging, it is found that the session that puts the verification code characters in is not the same as the session that obtains the verification code characters from the session. For the same session, this encounters cross-domain problems again, that is to say, the cross-domain processing before does not take effect, or the front-end and back-end separation cross-domain problems have not been completely solved before.
1. What is CORS
CORS is a W3C standard, the full name is "Cross-origin resource sharing", which allows browsers to send XMLHttpRequest requests to cross-origin servers, thus overcoming the limitation that AJAX can only be used on the same origin.
It adds a special Header [Access-Control-Allow-Origin] to the server to tell the client the cross-domain restrictions. If the browser supports CORS and judges that the Origin is passed, it will allow XMLHttpRequest to initiate a cross-domain request.
2. CORS Header
| Attributes | Glossary |
|---|---|
| Access-Control-Allow-Origin | Which domains are allowed to initiate cross-domain requests |
| Access-Control-Allow-Methods | Set the method to allow cross-origin requests |
| Access-Control-Max-Age | Set the number of seconds in which no pre-verification request should be sent |
| Access-Control-Allow-Headers | Allow cross-origin requests to contain content-type |
| Access-Control-Allow-Credentials | Set Allow Cookies |
3. Cross-domain error message
Mistake 1: There is no cross-domain processing between the front end and the back end
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-2fVp6pRd-1592127844241)(https://imgkr.cn-bj.ufileos.com/b5c15ac9-236b-48fd -b11b-b3d60ecdd88e.png)]
Mistake 2: Front-end cross-domain processing, back-end no cross-domain processing
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-7PQmloNe-1592127844244)(https://imgkr.cn-bj.ufileos.com/3a405185-f9fe-4359 -be74-9a27fce4535c.png)]
Mistake 3: There is no cross-domain processing on the front end, but cross-domain processing on the back end
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-SaIEnLLY-1592127844252)(https://imgkr.cn-bj.ufileos.com/3aee8e7e-b710-4111 -8d78-92a710b5cade.png)]
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-O3YOB0jG-1592127844256)(https://imgkr.cn-bj.ufileos.com/5205eb41-90eb-4eef -a16d-f4bc115e0129.png)]
4. Cross-domain processing method
Front-end processing method
Backend processing method
@CrossOrigin1. Add annotations to the controller layer
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-3OArBbZB-1592127844259)(https://imgkr.cn-bj.ufileos.com/7db15168-147e-46ff -9e4b-e9ad2a05313c.png)]
2. Add a global cross-domain processing configuration class
/**
* @description 全局跨域配置类
* @date: 2020/6/14
* @author: PeiChen
*/
@Configuration
public class GlobalCorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("PUT", "DELETE","GET","POST")
.allowedHeaders("*")
.exposedHeaders("access-control-allow-headers",
"access-control-allow-methods",
"access-control-allow-origin",
"access-control-max-age",
"X-Frame-Options")
.allowCredentials(false).maxAge(3600);
}
};
}
}
5. The front-end and back-end are separated successfully across domains
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-hAXQlTgY-1592127844261)(https://imgkr.cn-bj.ufileos.com/cd03bb8e-3327-44ed -9be0-bb466b9a0b1c.png)]
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-GHkwLZs9-1592127844269)(https://imgkr.cn-bj.ufileos.com/e7d01b91-f109-4321 -88ea-12da8911adfa.png)]
For front-end and back-end separation projects, it is necessary to overcome cross-domain problems. So far, the cross-domain problems introduced in this article have come to an end.