AngularJS 在发送 POST 数据时抛出 403 错误答案

【问题标题】：AngularJS throwing 403 error on sending POST dataAngularJS 在发送 POST 数据时抛出 403 错误
【发布时间】：2016-02-11 07:22:07
【问题描述】：

我的 Angular 应用程序向对其他域开放的 API 发出请求。

在发出POST 请求没有 data 字段时，请求成功完成。因此，$http.post(url).then(); 有效。但是，$http.post(url, data).then() or $http.post(url, null).then(); 没有。请求也使用 jQuery 和 Postman（我正在使用的 REST 客户端）完成。

抛出的错误是：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost' 不允许访问。响应的 HTTP 状态代码为 403。

设置自定义标题（就像 SO 上的大多数答案一样）不成功。使用 {headers: {}} 或修改 $httpProvider.defaults 传递配置对象显示 Chrome 检查器中的标题没有变化。

开启CORS plugin后问题依旧，说明这与API无关。

我错过了什么？

【问题讨论】：

来自 Angular 的请求可能有一个未在 CORS 清单中列入白名单的标头。尝试在 Postman 中一一添加 Angular 发出的请求的 headers 并找到那个不好的。

标签： javascript jquery angularjs

【解决方案1】：

我在使用 restws/Drupal 的 Angular 应用程序中遇到了类似的问题。

打开您的网络控制台并检查标头.. 应该会发现您的请求已被“预检”OPTIONS 请求替换现在在现代浏览器中，在跨域请求中，将在 PUT 之前首先触发 OPTIONS 请求。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Overview

我的猜测是 API 未配置为接受选项请求。

我不得不用一些小技巧修补 restws 以识别 OPTIONS 对象并返回以接受 PUT

【讨论】：

请见谅，不要放.. post
感谢您的回答。很抱歉，我无法访问 API，因此无法对此发表评论。很高兴你的工作正常了，干杯。

【解决方案2】：

刚刚意识到..

1) 您是否将 CORS 设置为通配符（或使用 CORS 模块“镜像”-）？我认为 OPTIONS 请求需要特定的域引用。我不得不将我的 CORS 标头更改为 Allow-access-control-origin>mydomain.com & NOT *

2) 另外，你是无头的吗？我发现使用restws - 我必须实际登录到我的drupalk站点然后向会话/令牌发出api请求以获取令牌，传递我的身份验证凭据。如果最初没有登录，我会收到 403 拒绝访问。

【讨论】：

【解决方案3】：

可能是 cors 配置有误。

如果您的问题是使用 tomcat 服务器，您必须在 web.xml 文件中使用以下代码配置 cors 过滤器：

<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> 
    <init-param> 
        <param-name>cors.allowed.origins</param-name> 
        <param-value>*</param-value> 
    </init-param> 
    <init-param> 
        <param-name>cors.allowed.methods</param-name> 
        <param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE</param-value> 
    </init-param> 
</filter>

<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

希望能帮到你！！

【讨论】：