Скачать или смотреть Fixing CORS Issues Between React Frontend and Spring Boot Backend

Learn how to resolve CORS errors when connecting a React frontend to a Spring Boot backend by properly configuring CORS on the server and fetching data correctly in React.
---
This video is based on the question https://stackoverflow.com/q/79481569/ asked by the user 'ii5' ( https://stackoverflow.com/u/19759143/ ) and on the answer https://stackoverflow.com/a/79481795/ provided by the user 'Vishal' ( https://stackoverflow.com/u/10976791/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Tryed to fetch and get error with CORS or empty response

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
Understanding the Problem

When your React frontend attempts to fetch data from a Spring Boot backend running on a different port or domain, browsers enforce the Cross-Origin Resource Sharing (CORS) policy to protect users. If the backend does not explicitly allow requests from the frontend origin, you'll see errors or receive empty responses.

You might have tried disabling CORS handling on the client side with mode: "no-cors" in fetch, but this leads to opaque or empty responses because the server never grants permission.

Interestingly, requests worked in Postman or plain JavaScript (outside React), because these tools don't enforce CORS.



How to Fix CORS Issues Properly

1. Configure CORS on the Spring Boot Backend

You need to tell your backend to explicitly allow requests from your React development server (usually running on http://localhost:3000). This can be done globally or on individual controllers.

Option A: Global CORS Configuration

Create a dedicated configuration class:

[[See Video to Reveal this Text or Code Snippet]]

This setup enables CORS for all endpoints, allowing all HTTP methods and headers from your React app.

Option B: Controller-Level CORS

Alternatively, apply CORS to specific endpoints using @ CrossOrigin:

[[See Video to Reveal this Text or Code Snippet]]

This approach restricts CORS permissions to only the annotated controller methods.



2. Update Your React Frontend Fetch Request

Ensure your fetch call is not using mode: "no-cors". Let the browser handle CORS normally so it can enforce security and provide meaningful errors.

[[See Video to Reveal this Text or Code Snippet]]

This code:

Requests data from your backend.

Checks if the response is OK; if not, throws an error.

Reads the response as plain text.

Updates state to display the received string.



Summary

CORS errors occur because your backend must authorize frontend origins explicitly.

Configure CORS in Spring Boot globally or per controller to allow React's origin.

Never use mode: "no-cors" in fetch; it blocks access to response data.

After this setup, fetch requests will succeed, enabling smooth frontend-backend communication.

With these steps, your React app and Spring Boot service will communicate without CORS-related problems.