CORS Root Cause Analysis and Solutions for Missing Authorization Header in Angular HTTP Requests

Problem Phenomenon and Preliminary Analysis

In the Angular 2 RC6 development environment, developers encountered a perplexing issue when attempting to send authentication information via HTTP POST requests. The code explicitly set the Authorization header:

let headers = new Headers();
headers.append("Authorization","Basic YW5ndWxhci13YXJlaG91c2Utc2VydmljZXM6MTIzNDU2");
this.http.post(AUTHENTICATION_ENDPOINT + "?grant_type=password&scope=trust&username=" + login + "&password=" + password, null, {headers: headers})

However, the actual sent request did not contain the expected Authorization header, instead showing CORS-related special headers:

Access-Control-Request-Headers: authorization
Access-Control-Request-Method: POST

More notably, the browser actually sent an OPTIONS request instead of a POST request:

OPTIONS /oauth/token?grant_type=password&scope=trust&username=asdf&password=asdf HTTP/1.1

In-depth Analysis of CORS Mechanism

The root cause of this phenomenon lies in the browser's Cross-Origin Resource Sharing (CORS) security mechanism. When a web application's frontend and backend services are deployed on different domains or ports, the browser automatically triggers the CORS preflight process.

The essence of CORS preflight requests is a security verification mechanism. Before sending the actual request (such as POST), the browser first sends an OPTIONS request to the target server to inquire whether cross-origin access is permitted. This OPTIONS request contains several key pieces of information:

• Access-Control-Request-Method: Declares the HTTP method to be used
• Access-Control-Request-Headers: Declares the custom headers to be used
• Origin: Declares the request origin

The server must correctly respond to this OPTIONS request, explicitly authorizing cross-origin access, before the browser will proceed to send the actual POST request.

Server-side Solutions

The key to solving the problem lies in server-side CORS configuration. Taking the Spring framework as an example, a dedicated CORS filter needs to be implemented:

@Component
public class SimpleCORSFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
        chain.doFilter(req, res);
    }
}

Here, Access-Control-Allow-Headers must explicitly include Authorization to authorize the browser to send the authentication header in subsequent requests.

Angular Code Optimization Suggestions

Although the main issue is on the server side, Angular code can also be further optimized. Referring to other solutions, it is recommended to use RequestOptions for clearer configuration:

let headers = new Headers({'Content-Type': 'application/json'});
headers.append('Authorization', 'Bearer ' + token);
let options = new RequestOptions({headers: headers});
return this.http.post(apiUrl, body, options)
    .map(response => response.json())
    .catch(error => this.handleError(error));

This approach provides better type safety and error handling mechanisms. Additionally, it is recommended to encapsulate authentication logic as independent services to improve code maintainability and reusability.

Complete Request Flow Analysis

Understanding the complete CORS request flow is crucial for debugging similar issues:

1. Browser detects cross-origin request and suspends actual request sending
2. Sends OPTIONS preflight request to target server
3. Server responds to preflight request, declaring permitted cross-origin permissions
4. Browser verifies server response, confirms permissions, and sends actual request
5. Server processes actual request and returns data

During this process, configuration errors at any step can cause request failures. Developers need to pay attention to both client-side code and server configuration to ensure normal operation of cross-origin authentication.

Security Considerations and Best Practices

When implementing CORS solutions, security issues must be considered:

• In production environments, Access-Control-Allow-Origin should be set to specific domains rather than wildcards
• For sensitive operations, CSRF protection mechanisms are recommended
• Regularly review and update CORS configurations to ensure consistency with security policies
• Consider using HTTPS to encrypt transmission of authentication information

Through proper CORS configuration and optimized client code, secure and efficient cross-origin authentication systems can be built, providing a reliable identity verification foundation for modern web applications.