若依SpringBoot跨域时，如何正确配置CORS以解决浏览器跨域请求报错问题？

Question

在使用若依框架（RuoYi）基于Spring Boot开发时，如何正确配置CORS以解决浏览器跨域请求报错问题？ 场景：前端页面通过AJAX向后端接口发起请求，但浏览器控制台提示“跨域资源共享”（CORS）错误。原因是前后端分离部署时，前端域名与后端API域名不一致。 常见问题：直接在Controller中添加`@CrossOrigin`注解或全局配置未生效，导致依旧出现跨域错误。 解决方法：需确保CORS配置正确。推荐在Spring Boot中通过重写Web配置类实现全局跨域支持。例如，在配置类中扩展`WebMvcConfigurer`接口并重写`addCorsMappings`方法，明确允许的来源、HTTP方法和头部信息。同时，注意避免通配符与特定域名冲突，以及是否需要支持凭证（Credentials）。此外，若使用网关（如Spring Cloud Gateway），还需检查网关层的CORS策略是否正确配置。

Answer 1

一、问题概述

在使用若依框架（RuoYi）基于Spring Boot开发时，前后端分离部署可能会导致浏览器跨域请求报错问题。具体场景是：前端页面通过AJAX向后端接口发起请求，但浏览器控制台提示“跨域资源共享”（CORS）错误。这通常是因为前端域名与后端API域名不一致。

尽管尝试了常见的解决方法，如直接在Controller中添加`@CrossOrigin`注解或全局配置，但问题仍未解决。接下来，我们将深入分析并提供一个全面的解决方案。

二、常见技术问题分析

• 问题1： 直接在Controller中添加`@CrossOrigin`注解未生效。
• 问题2： 全局配置未正确应用到所有接口。
• 问题3： 使用网关（如Spring Cloud Gateway）时，网关层的CORS策略未正确配置。

以上问题的核心在于对CORS机制的理解不足，以及未正确配置Spring Boot中的CORS支持。

三、解决方案

1. 通过重写Web配置类实现全局跨域支持

推荐的方式是在Spring Boot中通过重写Web配置类实现全局跨域支持。具体步骤如下：

1. 创建一个配置类，扩展`WebMvcConfigurer`接口。
2. 重写`addCorsMappings`方法，明确允许的来源、HTTP方法和头部信息。

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://example.com") // 替换为实际前端域名
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Content-Type", "Authorization")
                .allowCredentials(true); // 是否支持凭证
    }
}

2. 避免通配符与特定域名冲突

如果需要支持多个特定域名，应避免使用通配符`*`。例如：

属性	值
allowedOrigins	"http://domain1.com", "http://domain2.com"

3. 检查网关层的CORS策略

如果项目使用了Spring Cloud Gateway等网关组件，需确保网关层的CORS策略已正确配置。以下是Spring Cloud Gateway的CORS配置示例：

spring:
  cloud:
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOrigins: "http://example.com"
            allowedMethods:
              - GET
              - POST
              - PUT
              - DELETE
            allowedHeaders:
              - Content-Type
              - Authorization
            allowCredentials: true

四、流程图说明

以下是一个关于如何配置CORS的流程图，帮助开发者更好地理解整个过程：

graph TD;
            A[开始] --> B{是否使用网关};
            B -- 是 --> C[配置网关层CORS];
            B -- 否 --> D[创建Web配置类];
            D --> E[重写addCorsMappings方法];
            E --> F[测试跨域请求];