后端配置了跨域，前端还是提示跨域问题解决

原创已于 2025-04-05 11:14:34 修改 · 700 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-04-05 11:11:27 首次发布

问题背景

最近接手了一个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 方式的请求，不然就会出现跨域问题。