AngularJS POST 请求失败:Response for preflight has invalid HTTP status code 404

阅读时长 3 分钟读完

在使用 AngularJS 时,当进行 POST 请求时可能会遇到 "Response for preflight has invalid HTTP status code 404" 的错误。这个错误通常是由于跨域请求时服务器返回的 HTTP 响应代码不正确导致的。下面将介绍该错误的原因、解决方法和示例代码。

错误原因

在进行跨域 AJAX 请求时,浏览器会先发送一个 OPTIONS 请求,以获取服务器支持的请求类型和头信息等。这个请求被称为预检请求(preflight request)。如果服务器没有正确地处理这个预检请求,就会导致上述错误。

在 AngularJS 中,通过 $http 服务发起 POST 请求时,默认会发送一个 Content-Type 为 application/json 的请求头。而对于跨域请求来说,如果服务器没有正确地配置 CORS(Cross-Origin Resource Sharing),就会返回一个带有 404 状态码的响应,从而触发上述错误。

解决方法

要解决这个问题,需要在服务器端添加一些配置,使其正确地响应预检请求。以下是两种解决方法:

方法一:在服务器端添加 CORS 配置

在服务器端,需要添加如下的 CORS 配置:

上述代码中,Access-Control-Allow-Origin 表示允许跨域访问的来源,* 表示允许所有来源;Access-Control-Allow-Methods 表示允许哪些 HTTP 方法,可以根据实际需求进行配置;Access-Control-Allow-Headers 表示允许哪些 HTTP 头信息,也可以根据实际需求进行配置。

方法二:在 AngularJS 中指定 Content-Type

在 AngularJS 中可以通过设置 Content-Type 来避免发送预检请求。例如,如果要发送一个表单数据(Content-Type 为 application/x-www-form-urlencoded)的 POST 请求,可以这样写:

-- -------------------- ---- -------
-------
    ------- -------
    ---- -------------
    ----- ------------------ ---------------- --------- ------------------
    -------- ---------------- ------------------------------------
---------------- ----------------- -
    -- ---
-- -------- --------------- -
    -- ---
---

总结

以上就是关于 "Response for preflight has invalid HTTP status code 404" 错误的解决方法。在进行跨域 AJAX 请求时,一定要注意服务器的 CORS 配置以及请求头的设置,才能避免这类错误的发生。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/25375

纠错
反馈