İlteriş Catering Company

Problem

During the development and integration phase of the project, the React-based frontend application and Java Spring Boot backend services were running on different ports and had distinct origin addresses, causing browser-side CORS (Cross-Origin Resource Sharing) blocks. Requests sent from the frontend to the API were rejected due to browser security policies, completely halting data communication.

What I Did

• Created a global CORS configuration (CorsRegistry) within the Spring Boot backend project.
• Used the addCorsMappings method to securely open /api/** endpoints to incoming requests.
• Defined both the production domain address (https://ilterisyemek.com) and the local development environment (http://localhost:3000) within the allowed origins of the CORS policy.
• Enabled credential sharing and tailored header and method (GET, POST, PUT, DELETE, OPTIONS) constraints to match the frontend's requirements.

Technical notes

@Configuration
public class WebConfig implements WebMvcConfigurer {

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

Result

Thanks to the configured CORS rules, communication between the frontend and backend was established securely and smoothly. Browser-based blocks were completely eliminated, enabling the React interface to seamlessly fetch and update data from the Spring Boot API services.