Understanding and Fixing CORS Errors in Web Applications

When developing modern web applications, it is common to separate the frontend and backend into different servers. For example:

• Frontend: http://localhost:4200
• Backend API: http://192.168.50.151:8080

While this architecture offers flexibility, it often introduces a common problem:

Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource.

Reason:
CORS header 'Access-Control-Allow-Origin' missing.

Status code: 403

This article explains what causes this error and how to resolve it.

What Is CORS?

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that restricts web pages from making requests to a different domain, IP address, or port.

For example:

Even if the backend API is reachable from the network, the browser may block access if the server does not explicitly allow it.

Typical Error Messages

Developers commonly encounter messages such as:

Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource.

or

Reason: CORS header 'Access-Control-Allow-Origin' missing.

or

Failed to fetch

or

Response to preflight request doesn't pass access control check.

Understanding the HTTP 403 Response

A 403 response means:

Forbidden

The server received the request but refused to process it.

When combined with a CORS error, two things may be happening:

1. The request is being rejected by application security.
2. The server is not returning CORS headers.

Example:

HTTP/1.1 403 Forbidden
Content-Type: application/json

Missing:

Access-Control-Allow-Origin: *

Because the header is missing, the browser hides the actual response and reports a CORS failure.

How Browsers Process Cross-Origin Requests

Consider the following JavaScript:

fetch('http://192.168.50.151:8080/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        username: 'user@example.com',
        password: 'secret'
    })
});

The browser may first send a preflight request:

OPTIONS /login

The server must respond with headers such as:

Access-Control-Allow-Origin: http://localhost:4200
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type

If these headers are missing, the browser blocks the request.

Diagnosing the Problem

Step 1: Open Browser Developer Tools

Press:

F12

Navigate to:

Network Tab

Locate the failing request.

Check:

• Request URL
• Request Method
• Response Headers
• Status Code

Step 2: Check Response Headers

A successful CORS response should contain:

Access-Control-Allow-Origin: *

or

Access-Control-Allow-Origin: http://localhost:4200

If the header is missing, the backend configuration needs adjustment.

Step 3: Verify API Accessibility

Use curl:

curl -v http://192.168.50.151:8080/login

If curl works but the browser fails, the issue is almost certainly CORS-related.

Configuring CORS in Spring Boot

Global Configuration

Create a configuration class:

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

This enables CORS for all endpoints.

Controller-Level Configuration

For a specific endpoint:

@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class LoginController {

    @PostMapping("/login")
    public ResponseEntity<?> login(
            @RequestBody LoginRequest request) {

        return ResponseEntity.ok().build();
    }
}

Spring Security Considerations

Many developers configure CORS correctly but still receive:

403 Forbidden

because Spring Security blocks the request.

Example configuration:

@Bean
public SecurityFilterChain securityFilterChain(
        HttpSecurity http) throws Exception {

    http
        .cors()
        .and()
        .csrf(csrf -> csrf.disable());

    return http.build();
}

Also ensure that OPTIONS requests are permitted:

.requestMatchers(HttpMethod.OPTIONS, "/**")
.permitAll()

Without this, preflight requests may fail.

Common Development Scenarios

Angular Frontend

this.http.post(
    'http://192.168.50.151:8080/login',
    credentials
);

If Angular runs on:

http://localhost:4200

the backend must explicitly allow this origin.

React Frontend

axios.post(
    'http://192.168.50.151:8080/login',
    payload
);

The same CORS requirements apply.

Ionic Applications

Ionic applications frequently encounter CORS issues during browser testing.

When running:

ionic serve

the application executes in a browser and must obey browser security policies.

When deployed as a native mobile application, CORS restrictions may differ depending on the networking layer used.

Temporary Development Workarounds

Some developers use browser extensions that disable CORS checking.

While useful for testing:

Do not use this approach in production.

It only affects your local browser and does not solve the actual server configuration issue.

Best Practices

Allow Only Required Origins

Avoid:

Access-Control-Allow-Origin: *

in production environments.

Prefer:

Access-Control-Allow-Origin: https://yourdomain.com

Restrict Allowed Methods

Instead of:

.allowedMethods("*")

use:

.allowedMethods("GET", "POST")

when possible.

Handle Preflight Requests

Always allow:

OPTIONS

requests for APIs consumed by browsers.

Review Security Configuration

Many CORS issues are actually caused by:

• Authentication filters
• CSRF protection
• Reverse proxies
• API gateways

Verify each layer independently.

Conclusion

The error:

Cross-Origin Request Blocked:
Reason: CORS header 'Access-Control-Allow-Origin' missing.
Status code: 403

usually indicates that the backend server is either:

1. Not configured to allow requests from the frontend origin.
2. Rejecting requests through a security layer before CORS headers are added.

The most effective troubleshooting approach is:

1. Inspect the Network tab.
2. Verify the response headers.
3. Check preflight OPTIONS requests.
4. Configure CORS in the backend.
5. Review authentication and security filters.

By correctly configuring CORS and ensuring security rules permit cross-origin access, frontend applications can communicate reliably with backend APIs while maintaining browser security standards.