<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Sharan Patil</title>
    <description>The latest articles on DEV Community by Sharan Patil (@sharan_patil_1992c42e0d6b).</description>
    <link>https://dev.to/sharan_patil_1992c42e0d6b</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4111337%2F30f5a1ff-f6e2-4cad-a04e-e635ded02ec2.png</url>
      <title>DEV Community: Sharan Patil</title>
      <link>https://dev.to/sharan_patil_1992c42e0d6b</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sharan_patil_1992c42e0d6b"/>
    <language>en</language>
    <item>
      <title>How I Debugged a CORS Error That Broke My Spring Boot + React Connection</title>
      <dc:creator>Sharan Patil</dc:creator>
      <pubDate>Sat, 05 Sep 2026 15:56:36 +0000</pubDate>
      <link>https://dev.to/sharan_patil_1992c42e0d6b/how-i-debugged-a-cors-error-that-broke-my-spring-boot-react-connection-99c</link>
      <guid>https://dev.to/sharan_patil_1992c42e0d6b/how-i-debugged-a-cors-error-that-broke-my-spring-boot-react-connection-99c</guid>
      <description>&lt;p&gt;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.&lt;br&gt;
The Problem&lt;br&gt;
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?&lt;br&gt;
What I Learned&lt;br&gt;
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.&lt;br&gt;
The Fix&lt;br&gt;
I added @CrossOrigin to my controller, explicitly allowing my frontend's origin to make requests:&lt;br&gt;
@CrossOrigin(origins = "&lt;a href="http://localhost:3000%22" rel="noopener noreferrer"&gt;http://localhost:3000"&lt;/a&gt;)&lt;br&gt;
@RestController&lt;br&gt;
public class TransactionController {&lt;br&gt;
    // endpoints __&lt;br&gt;
}&lt;br&gt;
Once added, the browser stopped blocking the requests, and the frontend could finally read the responses from my API.&lt;br&gt;
What I'd Do Differently&lt;br&gt;
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.&lt;/p&gt;

</description>
      <category>java</category>
      <category>springboot</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
