2

Spring (4.2.3) で構築された API と AngularJS (1.3.19) で構築されたフロントの 2 つのアプリに分割された webapp があります。2 つのアプリは同じサーバー上にないため、クロス オリジン リクエストに苦労しています。アプリが /articles に対する GET のような単純なリクエストを使用している場合、問題はありません。アプリが JSON 本文の POST /articles などのプリフライト リクエストを使用している場合、POST が可能かどうかを確認する OPTIONS リクエストに 403 があります。

web.xml :

<filter>
  <filter-name>cors</filter-name>
  <filter-class>com.clacsy.api.CORSFilter</filter-class>
</filter>

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

CORSFilter.java :

public class CORSFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)  throws IOException, ServletException {

        response.addHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
            response.addHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));
        }

        filterChain.doFilter(request, response);
    }
}

リクエストヘッダー:

  • Access-Control-Request-Headers:accept、コンテンツ タイプ
  • Access-Control-Request-Method:POST
  • オリジン: http://localhost:9001

応答 ：

  • 依頼方法：OPTIONS
  • ステータスコード:403 禁止

応答ヘッダー:

  • Access-Control-Allow-Headers:accept、コンテンツ タイプ
  • アクセス制御許可メソッド:GET、POST、PUT、DELETE、OPTIONS
  • Access-Control-Allow-Origin: http://localhost:9001

3 つの Access-Control-Allow-X の値についても * を試しましたが、それでも同じ問題が発生します。Chrome と Firefox でこの問題に直面しています。Safari では 403 が表示されますが、POST は実行されます。

インターネットで見つけたこの問題に対するすべての回答は役に立ちませんでした。OPTIONS リクエストが 403 を返す理由がわかりません。すべての Access Control ヘッダーが正しい値に設定されているようです。

私が数日間直面している問題を解決してくれてありがとう。

[更新] localhost:9000 の AngularJS アプリから localhost:8080 の API に呼び出しを行うと、動作します! しかし、localhost:9000 から Heroku でホストされている API に呼び出しを行うと、そうではありません。Heroku は何かをブロックしていますか?

4

0 に答える 0