CORS angular js + restEasy on POST

Posted 2023-02-27

【中文标题】CORS angular js + restEasy on POST

【英文标题】：

【发布时间】：2014-05-16 00:14:25

【问题描述】：

我正在从我的 angular js 应用程序向使用 RestEasy 实现的 RESTful API 执行一些 POST 请求. 情况是我需要 CORS 所以我用这段代码添加了一个 servlet 过滤器：

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException 
    HttpServletResponse response = (HttpServletResponse) res;
    response.addHeader("Access-Control-Allow-Origin", "*");
    response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.addHeader("Access-Control-Max-Age", "3600");
    response.addHeader("Access-Control-Allow-Headers", "Content-Type");
    chain.doFilter(req, res);

但我不明白为什么它只适用于 GET 请求而不适用于 POST 请求，chrome 控制台上的错误是：

请求中没有“Access-Control-Allow-Origin”标头 资源

我的 POST 请求是：

$http(method: 'POST', 
       url: myUrl,
       data: $scope.data,
       headers: 'Content-Type': 'application/json'
);  

这是我在 POST 上收到的回复：

Allow:POST, OPTIONS
Content-Length:0
Date:Thu, 03 Apr 2014 23:27:22 GMT
Server:Apache-Coyote/1.1

有什么想法吗？谢谢！编辑： 在 IE10 上测试，它可以工作，但不能在 chrome 和 firefox 上工作......任何人都知道为什么？

【问题讨论】：

您如何使用 GET 请求？

方法相同，但使用 'GET' 而不是 'POST' 和另一个 url 但在同一个 WS 上

我认为您不需要明确允许 Content-Type 标头。尝试删除它。

仍然不起作用，正如您在我的编辑中看到的那样，它的浏览器似乎... FF 和 chrome 没有收到与 IE 相同的响应标头

适用于 IE，但不适用于 Chrome 或 Firefox？那是odd。

【参考方案1】：

最后我找到了这个解决方法： 它与 IE 一起工作的原因是 IE 直接发送 POST 而不是首先发送预检请求以请求许可。 但我仍然不知道为什么过滤器无法管理 OPTIONS 请求并默认发送过滤器中未描述的标头（似乎只是这种情况的覆盖.. .也许是一件轻松的事情...）

所以我在我的休息服务中创建了一个 OPTIONS 路径，它重写了响应并使用响应标头在响应中包含标头

如果有人遇到这种情况，我仍在寻找干净的方法 之前。

【参考方案2】：

我很幸运地使用这个库为我的 API（在 Wildfly 上）配置了跨域资源共享 (CORS)：

<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>2.1</version>
</dependency>

设置非常简单。只需将上述依赖项添加到您的 pom 中，然后将以下配置添加到您的 web.xml 文件的 webapp 部分。

<filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>

    <init-param>
        <param-name>cors.allowGenericHttpRequests</param-name>
        <param-value>true</param-value>
    </init-param>

    <init-param>
        <param-name>cors.allowOrigin</param-name>
        <param-value>*</param-value>
    </init-param>

    <init-param>
        <param-name>cors.allowSubdomains</param-name>
        <param-value>false</param-value>
    </init-param>

    <init-param>
        <param-name>cors.supportedMethods</param-name>
        <param-value>GET, HEAD, POST, DELETE, OPTIONS</param-value>
    </init-param>

    <init-param>
        <param-name>cors.supportedHeaders</param-name>
        <param-value>*</param-value>
    </init-param>

    <init-param>
        <param-name>cors.supportsCredentials</param-name>
        <param-value>true</param-value>
    </init-param>

    <init-param>
        <param-name>cors.maxAge</param-name>
        <param-value>3600</param-value>
    </init-param>

</filter>

<filter-mapping>
    <!-- CORS Filter mapping -->
    <filter-name>CORS</filter-name>
    <url-pattern>*</url-pattern>
</filter-mapping>

如果您愿意，也可以使用属性文件对其进行配置。这个库就像一个魅力，给你很大的配置灵活性！