前言
最近在写前后端分离项目的时候,遇到了前后端分离必须解决的跨域问题,而我起初只是在 Controller 层加上了注解@CrossOrigin(allowCredentials = "true")
,暂时解决了跨域问题。但是在开发验证码的时候,始终获取不到session中的验证码字符,获取到的验证码字符始终为null,调试之后发现放入验证码字符的session与从session中获取验证码字符的session不是同一个session,这就又遇到了跨域问题,也就是说之前处理的跨域并不生效了,或者说之前并没有完全解决前后端分离跨域问题。
一、什么是CORS
CORS 是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing),允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了AJAX只能同源使用的限制。
它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制,如果浏览器支持CORS、并且判断Origin通过的话,就会允许XMLHttpRequest发起跨域请求。
二、CORS Header
属性 | 名词解释 |
---|---|
Access-Control-Allow-Origin | 允许哪个域发起跨域请求 |
Access-Control-Allow-Methods | 设置允许跨域请求的方法 |
Access-Control-Max-Age | 设置在多少秒内无需再发送预校验请求 |
Access-Control-Allow-Headers | 允许跨域请求包含content-type |
Access-Control-Allow-Credentials | 设置允许Cookie |
三、跨域错误信息
错误一:前、后端均无跨域处理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2fVp6pRd-1592127844241)(https://imgkr.cn-bj.ufileos.com/b5c15ac9-236b-48fd-b11b-b3d60ecdd88e.png)]
错误二:前端跨域处理,后端无跨域处理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7PQmloNe-1592127844244)(https://imgkr.cn-bj.ufileos.com/3a405185-f9fe-4359-be74-9a27fce4535c.png)]
错误三:前端无跨域处理,后端跨域处理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SaIEnLLY-1592127844252)(https://imgkr.cn-bj.ufileos.com/3aee8e7e-b710-4111-8d78-92a710b5cade.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3YOB0jG-1592127844256)(https://imgkr.cn-bj.ufileos.com/5205eb41-90eb-4eef-a16d-f4bc115e0129.png)]
四、跨域处理方法
前端处理方法
后端处理方法
1.在controller层加上@CrossOrigin
注解
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3OArBbZB-1592127844259)(https://imgkr.cn-bj.ufileos.com/7db15168-147e-46ff-9e4b-e9ad2a05313c.png)]
2.加一个全局跨域处理配置类
/**
* @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);
}
};
}
}
五、前后端分离成功跨域
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hAXQlTgY-1592127844261)(https://imgkr.cn-bj.ufileos.com/cd03bb8e-3327-44ed-9be0-bb466b9a0b1c.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHkwLZs9-1592127844269)(https://imgkr.cn-bj.ufileos.com/e7d01b91-f109-4321-88ea-12da8911adfa.png)]
前后端分离项目,就必须要克服跨域问题,至此,本篇文章介绍的跨域问题就先告一段落了。