How to Handle CORS Issues in Your Full Stack App

If you've ever built a full stack application, you’ve probably run into CORS errors.

‍

Those are the frustrating security warnings that block requests between your frontend and backend.

‍

Fixing these issues is key to ensuring your frontend and backend communicate smoothly, without annoying browser blocks getting in the way.

What is CORS and Why is It Important for Security?

CORS (Cross-Origin Resource Sharing) is a security mechanism that web browsers use to protect users from potentially harmful cross-site requests that prevents unauthorized requests between different domains.

‍

By default, browsers block requests from one domain (e.g., frontend.com) to another (e.g., backend.com) unless the server explicitly allows it.

‍

Let's look at an example.

Why Do CORS Errors Happen and How Do They Relate to Security?

A CORS error happens when your frontend (running on one domain) tries to fetch data from a backend API hosted on a different domain, and the backend does not allow it.

‍

Example scenario:

• Your frontend (http://localhost:4200 for Angular, or http://localhost:3000 for React) makes a request to http://api.yourbackend.com. For example, you are trying to display a list of products in a grid on the frontend, and you need to fetch the product details and images from the backend.
• If the backend doesn’t send the right CORS headers, the browser blocks the request and throws an error. In other words, browser does not recognise where the data on your products is coming from, and blocks it.

How to Fix CORS in Your Full Stack App

There are two quick ways to do this: configure CORS in the backend or use a proxy in the frontend.

‍

1. Configure CORS on Your Backend

‍

For a Spring Boot Backend:

‍

Add the following to your controller or global configuration:

‍

import org.springframework.web.bind.annotation.CrossOrigin;

@CrossOrigin(origins = "http://localhost:4200")
@RestController
public class MyController {
    @GetMapping("/data")
    public String getData() {
        return "Hello from backend!";
    }
}

‍

Or configure it globally:

‍

import org.springframework.context.annotation.Bean;
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 CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:4200")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
}

‍

‍

For a Node.js/Express Backend:
‍

Use the cors package to enable CORS:

‍

const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors({
    origin: "http://localhost:3000",
    methods: "GET,POST,PUT,DELETE",
    credentials: true
}));

app.get("/data", (req, res) => {
    res.json({ message: "Hello from backend!" });
});

app.listen(5000, () => console.log("Server running on port 5000"));

‍

‍

2. Use a Proxy for Development (Quick Fix)

‍

If you don’t want to change the backend, you can proxy requests from the frontend to the backend to avoid CORS issues.

‍

For Angular: Add a proxy config in angular.json:

‍

"proxyConfig": "proxy.conf.json"

‍

Then, create proxy.conf.json:

‍

{
  "/api": {
    "target": "http://localhost:5000",
    "secure": false,
    "changeOrigin": true
  }
}

‍

Run Angular with the proxy:

‍

ng serve --proxy-config proxy.conf.json

‍

For React: Add a proxy to package.json:

‍

"proxy": "http://localhost:5000"

‍

This automatically forwards API calls from localhost:3000 to localhost:5000.

Best Practices for CORS

• Limit allowed origins – Don’t use * in production.
• Enable only necessary HTTP methods (e.g., GET, POST).
• Use credentials: true if handling authentication tokens.
• Consider API Gateway for centralized control

Final Thoughts

CORS issues can be frustrating when your frontend and backend don’t communicate properly, but fixing them is easier than it seems.

‍

Adjusting your backend settings, using a proxy, or tweaking API configurations can quickly fix CORS issues.

‍

These small changes will help your app run smoothly and avoid annoying browser blocks.

‍

Apply these fixes and say goodbye to CORS errors!‍