Introduction
When building modern web applications, the frontend and backend often run on different ports or domains.
For example:
Frontend: http://localhost:3000
Backend: http://localhost:8080
When the frontend tries to call the backend API, you may see the following error in the browser console:
Access to fetch at 'http://localhost:8080/api/users'
from origin 'http://localhost:3000'
has been blocked by CORS policy
This error occurs because of CORS (Cross-Origin Resource Sharing) restrictions enforced by browsers.
In this article, we will understand:
• What CORS is
• Why this error occurs
• How to fix CORS issues in Spring Boot
What is CORS?
CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers.
It prevents a web application running on one origin from making requests to a resource on another origin unless the server explicitly allows it.
An origin is defined by three parts:
- Protocol (http / https)
- Domain
- Port
For example:
Frontend → http://localhost:3000
Backend → http://localhost:8080
Even though both run on localhost, the ports are different, so the browser treats them as different origins.
Because of this, the browser blocks the request unless the backend enables CORS.
Why Does the CORS Error Occur?
When a frontend application tries to call an API hosted on a different origin, the browser first sends a preflight request to check if the server allows the request.
If the backend does not include the correct CORS headers in the response, the browser blocks the request.
This results in an error like:
"Blocked by CORS policy"
What You Should Do Now
Solution 1: Using @CrossOrigin Annotation
The easiest way to fix CORS issues in Spring Boot is by using the @CrossOrigin annotation.
This annotation allows cross-origin requests for a specific controller or endpoint.
Example:
@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:3000")
public class UserController {
@GetMapping("/users")
public List<User> getUsers() {
return userService.getUsers();
}
}
In this example, the @CrossOrigin annotation allows requests from http://localhost:3000.
This means a frontend application running on port 3000 can access the Spring Boot API.
You can also allow multiple origins if needed.
⚠️ Note: Avoid using @CrossOrigin(origins = "*") in production because it allows requests from any domain.
Solution 2: Global CORS Configuration
If your application has many controllers, adding @CrossOrigin to each controller can become repetitive.
A better approach is to configure CORS globally using WebMvcConfigurer.
Example configuration:
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*");
}
}
This configuration enables CORS for all endpoints in the application.
Explanation:
-
addMapping("/**")→ applies CORS to all API endpoints -
allowedOrigins→ specifies which frontend domains can access the API -
allowedMethods→ defines the allowed HTTP methods
This approach is recommended for larger applications where many controllers exist.
Solution 3: Fix CORS When Using Spring Security
If your Spring Boot application uses Spring Security, CORS must also be enabled in the security configuration.
Otherwise, Spring Security may block cross-origin requests even if CORS is configured elsewhere.
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http
.cors()
.and()
.csrf().disable();
return http.build();
}
The cors() configuration enables CORS support inside Spring Security.
Without this configuration, Spring Security may override your CORS settings and block requests.
Disabling CSRF is common for REST APIs, especially when authentication is handled using tokens.
Best Practices for Handling CORS
When configuring CORS in production applications, consider the following best practices:
• Avoid allowing all origins (*) in production
• Only allow trusted frontend domains
• Use global configuration for larger applications
• Test CORS configuration carefully when using Spring Security
Conclusion
CORS errors are common when frontend and backend applications run on different origins.
In Spring Boot, you can resolve CORS issues using:
-
@CrossOriginannotation for specific controllers - Global CORS configuration using
WebMvcConfigurer - Enabling CORS support in Spring Security
Choosing the right approach depends on your application architecture.
By configuring CORS properly, you can allow secure communication between your frontend and backend applications.
Table of Contents
- What is CORS?
- Why Does the CORS Error Occur?
- Solution 1: Using @CrossOrigin
- Solution 2: Global CORS Configuration
- Solution 3: Fix CORS When Using Spring Security
- Best Practices
- Conclusion
💡 Developer Tip:
If you are developing locally with React or Angular, you can also configure a proxy to avoid CORS issues during development.
A step-by-step guide to fixing "Blocked by CORS policy" errors in Spring Boot applications.


Top comments (0)