Chapter 5.7☕ 14 min read

Spring Boot with Angular CORS

Different port? Different origin? CORS is the gate pass.

01The Concept: Browser Security

The Hyderabad IT Park Gate Pass Analogy:

Imagine an IT park in Madhapur. If employees from Building A try to walk into Building B without a gate pass, the security guard stops them. The guard says: “You are from a different origin. You cannot enter.”

A web browser acts exactly like this security guard. If an Angular app running on http://localhost:4200 tries to make an AJAX request to a Spring Boot app on http://localhost:8080, the browser sees different origins (ports) and blocks the request by default.

CORS is the “Gate Pass”. Spring Boot must explicitly send a header saying: “I allow requests coming from port 4200.”

02Technical Explanation

Cross-Origin: A request is cross-origin if the protocol, domain, or port differs (e.g., localhost:4200 → localhost:8080).
CORS Preflight: For complex requests (like POST with JSON), the browser sends a hidden OPTIONS request first to ask the server if it’s safe. Spring must respond to this OPTIONS request.
Global CORS Configuration: Instead of annotating every controller, we configure CORS globally in a WebMvcConfigurer bean.

03Full Working Code: Global CORS Setup

package com.devinhyderabad;

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) {
        // 1. Apply this to all endpoints starting with /api/
        registry.addMapping("/api/**")
                // 2. Allow the Angular dev server origin
                .allowedOrigins("http://localhost:4200")
                // 3. Allow all standard HTTP methods
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                // 4. Allow standard headers like Content-Type and Authorization
                .allowedHeaders("*")
                // 5. Allow sending of cookies/JWTs
                .allowCredentials(true);
    }
}

With this configuration, when Angular calls http://localhost:8080/api/books, Spring Boot responds with Access-Control-Allow-Origin: http://localhost:4200, and the browser happily lets the data through.

04How CORS Works Behind the Scenes

When a browser sees a cross-origin request, it first sends an OPTIONS preflight request to check if the server allows the actual request. The server must respond with the correct Access-Control-Allow-* headers. Only then does the browser send the real GET or POST request.

This preflight mechanism ensures that the server explicitly opts into cross-origin requests, preventing malicious websites from making unauthorized API calls from a user’s browser.

05Why It Matters / Interview Note

Interview Question: “What is CORS, and why do we need it? How do you configure it in Spring Boot?”

Answer: CORS (Cross-Origin Resource Sharing) is a browser security mechanism that prevents scripts from making requests to a different domain/port than the one that served the page. In Spring Boot, I configure it globally by overriding addCorsMappings in a WebMvcConfigurer class, specifying the allowed origins, methods, and headers.

Enterprise Note: Be careful with allowedOrigins("*") (allow all origins). While it makes development easy, it is a security risk in production. In production, always explicitly list your exact frontend domain (e.g., https://www.devinhyderabad.com).

Key Takeaways

✅ CORS is a browser security mechanism blocking cross-origin requests by default
✅ Configure CORS globally via WebMvcConfigurer instead of per-controller
✅ Browsers send an OPTIONS preflight request before complex cross-origin calls
✅ Never use allowedOrigins("*") in production — always list exact frontend domains

PreviousSwagger OpenAPI Documentation 📋 All Chapters Next ChapterSpring Batch Intro →