前后端分离跨域问题解决

前言

最近在写前后端分离项目的时候，遇到了前后端分离必须解决的跨域问题，而我起初只是在 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

三、跨域错误信息

错误一：前、后端均无跨域处理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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
 */@ConfigurationpublicclassGlobalCorsConfig{@BeanpublicWebMvcConfigurercorsConfigurer(){returnnewWebMvcConfigurerAdapter(){@OverridepublicvoidaddCorsMappings(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)]

前后端分离项目，就必须要克服跨域问题，至此，本篇文章介绍的跨域问题就先告一段落了。