后端配置了跨域,前端还是提示跨域问题解决
后端正确进行了跨域配置,但是前端浏览器请求的时候还是出现了跨域问题,详细解决方案(实战测试可行)
·
问题背景
最近接手了一个SpringBoot的项目,身份认证使用的是原始的拦截器,然后在开发的过程中遇到了一个比较无厘头的问题,后端进行了跨域配置,但是前端还是提示了请求跨域。跨域配置如下:
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 设置允许跨域的路径
registry.addMapping("/**")
// 设置允许跨域请求的域名
.allowedOriginPatterns("*")
// 是否允许cookie
.allowCredentials(true)
// 设置允许的请求方式
.allowedMethods("POST", "GET", "DELETE", "PUT")
// 设置允许的header属性
.allowedHeaders("*")
// 跨域允许时间
.maxAge(3600);
}
}
然后浏览器就出现了跨域问题,如下所示:
解决过程
然后我想了一下,一般跨域问题是因为浏览器在正式发起HTTP请求前,会先发起一个请求方式为OPTIIONS
的请求,探测一下服务器端是否允许跨域请求。所以我决定在请求方式里面加上一个OPTIONS
请求方式,如下:
再次发起请求,居然还跨域,我靠,离谱
额,再想一下其他原因,因为项目用了拦截器,那是不是所有请求都会被拦截?那OPTIONS
方式的请求也会被拦截,但是作为探测请求是不应该被拦截的,所以决定将该请求方式的请求全部放行,如下:
如果请求方式为OPTIONS
直接放行。再次发起请求测试,结果如下:
请求成功。
总结
后面经过测试发现,跨域配置里面不需要设置OPTIONS
请求方式也是可以的,最主要的就是拦截器要放行OPTIONS
方式的请求,不然就会出现跨域问题。
更多推荐
所有评论(0)