AngularJS POST Request Fails: In-depth Analysis of Preflight Response with Invalid HTTP Status Code 404

Problem Background and Phenomenon Description

In modern web development, frontend-backend separation is prevalent, but Cross-Origin Resource Sharing issues often challenge developers. This article examines a specific case: an AngularJS client interacting with a SlimPHP server where GET requests succeed but POST requests fail with the error "Response for preflight has invalid HTTP status code 404". This problem stems from the browser's automatic OPTIONS preflight request not being properly handled by the server before sending cross-origin POST requests.

In-depth Analysis of CORS Mechanisms

Cross-Origin Resource Sharing is a security mechanism that allows web applications to request resources from different domains. When a request meets specific criteria, the browser automatically initiates a preflight request to verify server permission for the actual request. Preflight requests use the OPTIONS method and include headers like Access-Control-Request-Method and Access-Control-Request-Headers. The server must respond with appropriate CORS headers, such as Access-Control-Allow-Origin, or the actual request will be blocked.

In the case study, the SlimPHP server set CORS headers but did not explicitly handle OPTIONS requests, causing preflight requests to return a 404 status code. This explains why GET requests succeeded while POST failed: simple requests like GET typically don't require preflight, whereas complex requests like POST trigger the preflight process.

Client-side Solution: Adjusting HTTP Header Configuration

The best answer proposes avoiding preflight requests by resetting AngularJS HTTP headers. Implementation details are as follows:

app.config(function ($httpProvider) {
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
});

This configuration clears default headers, making requests "simple" and thus bypassing preflight. However, note that this method may limit functionality, such as preventing custom headers or specific content types. Developers should evaluate their use case: for simple API calls, this might suffice; for scenarios requiring authentication or complex data, server-side support is necessary.

Server-side Optimization Recommendations

As a supplement, servers should properly handle OPTIONS requests to ensure compatibility. In SlimPHP, an OPTIONS route can be added:

$app->options('/post', function() use($app) {
    $app->response()->headers->set('Access-Control-Allow-Origin', '*');
    $app->response()->headers->set('Access-Control-Allow-Methods', 'POST, OPTIONS');
    $app->response()->headers->set('Access-Control-Allow-Headers', 'Content-Type');
    $app->response()->setStatus(200);
});

This ensures preflight requests receive correct responses, allowing subsequent POST requests to proceed. Combined with client-side configuration, it provides a more robust solution.

Summary and Best Practices

Resolving CORS issues requires understanding underlying mechanisms. Client-side adjustments can offer quick fixes but may introduce security or functional limitations; server-side handling is more standard and supports complex scenarios. Developers should choose based on needs: for simple applications, resetting headers might be adequate; for production environments, implementing full CORS support on the server is recommended. Through case analysis, this article emphasizes the importance of preflight requests in cross-origin development and provides practical code examples to help developers avoid common pitfalls.