ApacheとAWS EC2でのAPIサーバーのCORSエラーを解決する

Apacheをリバースプロキシとして使用したEC2上のAPIサーバーから、ブラウザからのリクエストが「CORSエラー」により失敗する問題が発生します。
この問題は、特に次のようなエラーメッセージが表示される場合に発生します。

Access to XMLHttpRequest at 'https://example-api.com/endpoint' from origin 'https://example-client.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

この記事は、この問題を解決するための詳細なガイドとコードサンプルを提供します。

CORS問題の原因

CORSは、ブラウザとサーバー間の安全性を高めるための要求です。ドメインが異なるリソースのAPIを呼び出す場合、サーバー側が「どのオリジンを許可するか」を明示する必要があります。
この要求が満たされない場合に、ブラウザ側でCORSエラーが発生します。

この問題はたいてい次の三つの原因に分類されます。

1. インフラを経由した調整不備のApacheプロキシ設定
2. APIサーバー側の不適切なCORSヘッダーの定義
3. セキュリティグループやネットワーク制御の問題

Apacheの設定例

次に、Apacheのリバースプロキシ設定を見直す手順を説明します。

Apacheの設定に「Header」モジュールを追加

Apacheのコンフィグファイルまたはバーチャルホスト設定に、次のようなヘッダーを追加します。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://example-client.com"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Headers "Authorization, Content-Type"
</IfModule>

<IfModule mod_proxy.c>
    ProxyPass "/api/" "http://localhost:8080/api/"
    ProxyPassReverse "/api/" "http://localhost:8080/api/"
</IfModule>

OPTIONSメソッドの充実化

ApacheがPreflightリクエストのOPTIONSを適切に処理できるよう設定します。

<Directory "/var/www/html/api">
    <Limit OPTIONS>
        Require all granted
    </Limit>
</Directory>

Apacheの内部デバッグ

Apacheのログで、リクエストがサーバーに届いているかを確認します。

sudo tail -f /var/log/httpd/access_log
sudo tail -f /var/log/httpd/error_log

APIサーバー側のCORS設定例

APIサーバーがNode.jsなどで構築されている場合、開発ライブラリでのCORS定義を確認します。
以下はExpressの例です。

ExpressでのCORS設定

const express = require('express');
const cors = require('cors');

const app = express();

const corsOptions = {
  origin: 'https://example-client.com',
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Authorization', 'Content-Type'],
};

app.use(cors(corsOptions));

その他のチェックポイント

上記の設定を行ったにもかかわらず問題が解決しない場合、以下のチェックを行ってください。

まとめ

CORSエラーは、特に複数のコンポーネントが絡むシステムでは見過ごされがちな問題です。
本記事では、ApacheやAPIサーバー、AWSのセキュリティ設定を含む包括的な解決手順を提供しました。
問題解決に役立つことを願っています。

これで問題が解決しない場合、サーバーログやネットワークモニタリングツールを使用してさらなる調査を行い、原因を特定してください。

• Original:https://minory.org/apache-node-cors-error.html
• Source:minory
• Author:管理者

Amazonベストセラー