Why Do AngularJS POST Requests Fail with HTTP Status Code 404?

Fixing AngularJS POSTs Failed with HTTP Status Code 404

In AngularJS, POST requests may fail with the error message "Response for preflight has invalid HTTP status code 404." This issue arises when the browser sends a preflight OPTIONS request to verify permissions before the actual POST request. The server must handle this preflight request and respond with the appropriate CORS headers.

Server-Side Configuration

In the SlimPHP server, ensure that you have included the following headers in your response:

<code class="php">$app->response()->headers->set('Access-Control-Allow-Headers', 'Content-Type');
$app->response()->headers->set('Content-Type', 'application/json');
$app->response()->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
$app->response()->headers->set('Access-Control-Allow-Origin', '*');</code>

Client-Side Configuration

Next, disable the preflight request by modifying the AngularJS client code:

<code class="javascript">app.config(function ($httpProvider) {
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
});</code>

By resetting the headers on the client side, the browser will send a direct POST request without a preflight OPTIONS request. This should resolve the HTTP 404 error.

CORS Overview

Cross-Origin Resource Sharing (CORS) allows requests from domains different from the one serving the content. It involves a preflight request to verify permissions before the actual request. Improper handling of these preflight requests can lead to the HTTP 404 error. By understanding CORS and configuring both the client and server accordingly, you can successfully execute POST requests in AngularJS.

The above is the detailed content of Why Do AngularJS POST Requests Fail with HTTP Status Code 404?. For more information, please follow other related articles on the PHP Chinese website!