Understanding CORS and How to Resolve It (e.g in Angular and Spring)

Cross-Origin Resource Sharing (CORS) is a security feature implemented by web browsers to prevent web pages from making requests to a different domain than the one that served the web page. This is known as the same-origin policy. While this policy is essential for security, it can be a hurdle when developing applications that rely on APIs hosted on different domains.

What is CORS?

CORS is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the resource originated. It is a protocol that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.

Why Does CORS Occur?

CORS issues typically arise when:

• Your frontend (e.g., Angular) is hosted on one domain (e.g., http://localhost:4200).
• Your backend (e.g., Spring Boot) is hosted on another domain (e.g., http://localhost:8080).
• The browser blocks requests from the frontend to the backend because they are on different origins.

Resolving CORS in Development and Production Environments

Here’s how you can resolve CORS issues in both development and production environments for Angular and Spring Boot applications.

1. Resolving CORS in Spring Boot

In your Spring Boot application, you can configure CORS globally or on a per-method basis.

Global CORS Configuration

  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 implements WebMvcConfigurer {

      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("http://localhost:4200") // Allow Angular app origin
                  .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                  .allowedHeaders("*")
                  .allowCredentials(true);
      }
  }
  

Per-Method CORS Configuration

You can also enable CORS for specific methods using the @CrossOrigin annotation:

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

  @RestController
  public class MyController {

      @CrossOrigin(origins = "http://localhost:4200")
      @GetMapping("/api/data")
      public String getData() {
          return "CORS-enabled response";
      }
  }
  

2. Resolving CORS in Angular

In Angular, you can handle CORS issues by configuring a proxy during development. This avoids CORS issues by making it appear as if the frontend and backend are on the same origin.

Setting Up a Proxy in Angular

Create a proxy.conf.json file in the root of your Angular project:

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

Then, update the angular.json file to use the proxy configuration:

  "architect": {
    "serve": {
      "options": {
        "proxyConfig": "src/proxy.conf.json"
      }
    }
  }
  

Now, when you run your Angular app using ng serve, all requests to /api will be proxied to http://localhost:8080.

3. Resolving CORS in Production

In production, you should ensure that your frontend and backend are served from the same domain to avoid CORS issues. Alternatively, you can configure your backend to allow requests from the frontend domain.

Using a Reverse Proxy

You can use a reverse proxy like Nginx or Apache to serve both your Angular app and Spring Boot API from the same domain. Here’s an example Nginx configuration:

  server {
      listen 80;

      server_name yourdomain.com;

      location / {
          proxy_pass http://localhost:4200; # Angular app
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
      }

      location /api {
          proxy_pass http://localhost:8080; # Spring Boot API
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
      }
  }
  

Conclusion

CORS is a common issue when developing web applications with separate frontend and backend servers. By configuring CORS in your Spring Boot application and using a proxy in Angular during development, you can avoid these issues. In production, using a reverse proxy or serving both applications from the same domain can help eliminate CORS problems altogether.