How to enable CORS in Spring Boot for my React frontend?

Question

I have a Spring Boot backend running on localhost:8080 and a React frontend on localhost:3000.

When I try to make API calls from React, I get:
```
Access to XMLHttpRequest has been blocked by CORS policy
```

How do I properly configure CORS in Spring Boot to allow requests from my React app?

jpa_wizard · Accepted Answer

Here are three ways to configure CORS in Spring Boot:

**Method 1: Global CORS Configuration (Recommended)**
```java
@Configuration
public class CorsConfig implements WebMvcConfigurer {

@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("http://localhost:3000")
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .allowedHeaders("*")
            .allowCredentials(true)
            .maxAge(3600);
    }
}
```

**Method 2: Controller-level @CrossOrigin**
```java
@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:3000")
public class MyController {
    // Your endpoints
}
```

**Method 3: CORS Filter (for security configs)**
```java
@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("http://localhost:3000");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}
```

**Production Setup:**
```java
@Value("${cors.allowed.origins}")
private String[] allowedOrigins;

registry.addMapping("/api/**")
    .allowedOrigins(allowedOrigins)  // From application.yml
```

1 Answer