Angular $http：预检响应具有无效的 HTTP 状态代码 403

Posted 2023-03-04

【中文标题】Angular $http：预检响应具有无效的 HTTP 状态代码 403

【英文标题】：Angular $http: Response for preflight has invalid HTTP status code 403

【发布时间】：2016-02-08 03:45:09

【问题描述】：

我正在编写一个 Angular 应用程序，我正在尝试使用 $http 服务连接到我们的 API。

$http.post('https://backend-test/***/v001/login', 'userName': 'admin', 'password': 'passtest', headers: 'Accept': 'application/json', 'Content-Type': 'application/json').then(function success(response) 
    console.log(response);
);

但是，我不断收到此错误：

XMLHttpRequest 无法加载 https://backend-test/***/v001/登录。回复 对于预检有无效的 HTTP 状态代码 403

它似乎发送了一个 OPTIONS 请求而不是一个 POST 请求：

请求方法：OPTIONS

奇怪的是，当我使用这个工具时它可以正常工作：

https://www.hurl.it/

有什么想法吗？

【问题讨论】：

我认为你必须把关键参数像$http.post('https://backend-test/***/v001/login', params : 'userName': 'admin', 'password': 'passtest', headers: 'Accept': 'application/json', 'Content-Type': 'application/json').then(function success(response) console.log(response); );

@pbolduc params 的使用不适用于发布请求

服务器似乎没有启用 CORS 和/或似乎没有设置为处理浏览器在发出跨域请求时将发送的 OPTIONS 预检请求

它将在 hurl.it 或 Runscope 上工作，因为它们是基于服务器的客户端发出请求。他们不需要像您的客户端 JS 那样使用 CORS。

【参考方案1】：

这里是 exressJS (NodeJS) 的 Cors 中间件

npm install cors

代码：

var cors = require('cors'),express = require('express');
var app = express(); // defining app using express

app.use(cors()); // **core as middleware**

【参考方案2】：

我遇到了同样的问题。我的后端是一个 tomcat 服务器。我通过像这样配置 web.xml 来解决它：

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization</param-value>
    </init-param>     
</filter>