为什么 AngularJS POST 请求失败并显示 HTTP 状态代码 404？

修复 AngularJS POST 失败并显示 HTTP 状态代码 404

在 AngularJS 中，POST 请求可能会失败，并显示错误消息“预检响应无效” HTTP 状态代码 404。”当浏览器在实际 POST 请求之前发送预检 OPTIONS 请求以验证权限时，就会出现此问题。服务器必须处理此预检请求并使用适当的 CORS 标头进行响应。

服务器端配置

在 SlimPHP 服务器中，确保已包含以下标头在您的回复中：

<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>

客户端配置

接下来，通过修改AngularJS客户端代码禁用预检请求：

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

通过重置客户端的 headers，浏览器将直接发送 POST 请求，而无需飞行前 OPTIONS 请求。这应该可以解决 HTTP 404 错误。

CORS 概述

跨源资源共享 (CORS) 允许来自与提供内容的域不同的域的请求。它涉及在实际请求之前验证权限的预检请求。这些预检请求处理不当可能会导致 HTTP 404 错误。通过了解 CORS 并相应地配置客户端和服务器，您可以在 AngularJS 中成功执行 POST 请求。

以上是为什么 AngularJS POST 请求失败并显示 HTTP 状态代码 404？的详细内容。更多信息请关注PHP中文网其他相关文章！