How I Debugged a CORS Error That Broke My Spring Boot + React Connection

I was building a full-stack Personal Finance Tracker — Spring Boot REST API on the backend, plain HTML/CSS/JS with fetch() calls on the frontend. Everything looked right on paper, but the moment I tried calling my API from the frontend, the browser blocked every request.
The Problem
The console kept throwing a CORS error — the browser refusing to let my frontend (running on one port) talk to my backend (running on another). My endpoints worked fine in Postman, which confused me at first — if the API was correct, why was only the browser complaining?
What I Learned
Postman doesn't enforce CORS — only browsers do, as a security measure to stop one site from silently calling another's API. My frontend and backend were technically on different origins (different ports count as different origins), so the browser was doing exactly what it's supposed to do.
The Fix
I added @CrossOrigin to my controller, explicitly allowing my frontend's origin to make requests:
@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class TransactionController {
// endpoints __
}
Once added, the browser stopped blocking the requests, and the frontend could finally read the responses from my API.
What I'd Do Differently
For anything beyond a personal project, I'd move CORS config to a centralized WebMvcConfigurer bean instead of annotating every controller — one place to manage allowed origins instead of repeating it everywhere.