ApacheでCORSを設定して静的ファイルをクロスドメイン配信する方法を徹底解説

Apacheを使用してWebサイトやアプリケーションの静的ファイル（画像、CSS、JavaScriptなど）を配信する際、クロスドメインでのアクセスを許可する必要があるケースがあります。例えば、異なるドメイン間でフロントエンドとバックエンドが分離している場合や、外部サービスが自サイトの静的リソースを利用する場合です。

このような状況で問題になるのが「同一オリジンポリシー」です。これは、セキュリティの観点から、異なるオリジン（ドメイン、プロトコル、ポートが異なる）からのリソースの取得を制限する仕組みです。しかし、正当な理由がある場合には、CORS（Cross-Origin Resource Sharing）を利用してクロスドメインでのアクセスを許可することが可能です。

本記事では、ApacheにおけるCORSの基本設定から、特定の静的ファイルのみにCORSを適用する方法、さらにセキュリティ面で注意すべきポイントまで詳しく解説します。CORSを正しく設定することで、他のドメインからの安全なリソース取得を可能にし、Webサイトの柔軟性を高めることができます。

それでは、まず「CORSとは何か」という基本から見ていきましょう。

CORSとは何か

CORS（Cross-Origin Resource Sharing）は、異なるオリジン（ドメイン、プロトコル、ポートの組み合わせ）からのリソースアクセスを許可するための仕組みです。これは、Webブラウザが持つ「同一オリジンポリシー」というセキュリティ制限を緩和し、安全にクロスドメインリクエストを行うために必要です。

同一オリジンポリシーとは

同一オリジンポリシーとは、異なるオリジンからのJavaScriptによるAPIやリソースへのアクセスを制限するセキュリティメカニズムです。これにより、悪意のあるスクリプトが他のサイトのデータを勝手に読み取ることを防ぎます。例えば、https://example.comがhttps://api.example.comにリクエストを送る場合、同一オリジンポリシーによりブロックされる可能性があります。

なぜCORSが必要なのか

CORSは、次のようなシナリオで必要になります。

• フロントエンドとバックエンドが異なるドメインで運用されている場合：SPA（シングルページアプリケーション）では、フロントエンドとAPIが異なるオリジンで動作することが一般的です。
• CDNを利用した静的ファイルの配信：CSSやJavaScript、画像などをCDNから配信する場合、クロスドメインでアクセスする必要があります。
• 外部サービスとの連携：外部APIや他社のサービスからリソースを取得する場合にCORSを使用します。

CORSの仕組み

CORSでは、サーバー側で特定のオリジンからのリクエストを許可するヘッダーを設定します。主なCORS関連のレスポンスヘッダーは以下の通りです。

• Access-Control-Allow-Origin：許可するオリジンを指定します。*で全てのオリジンを許可します。
• Access-Control-Allow-Methods：許可するHTTPメソッド（GET, POSTなど）を指定します。
• Access-Control-Allow-Headers：許可するリクエストヘッダーを指定します。

これにより、ブラウザはサーバーが許可したオリジンからのリクエストを受け入れ、クロスドメインでのリソース共有が可能になります。

次は、Apacheで具体的にCORSを設定する方法について解説します。

ApacheでCORSを有効にする方法の概要

ApacheでCORSを有効にするには、適切なディレクティブを使用してレスポンスヘッダーを設定する必要があります。これにより、異なるオリジンからのリクエストを許可し、静的ファイルのクロスドメイン配信が可能になります。

ApacheにおけるCORS設定の基本

ApacheでCORSを設定する際には、以下の方法があります。

1. .htaccessファイルを使用（特定のディレクトリやファイルに対してCORSを有効化）
2. httpd.confやapache2.confなどのメイン設定ファイルを編集（サーバーレベルで一括適用）
3. VirtualHost単位で設定（特定のサイトやドメインにのみCORSを適用）

基本的な流れ

1. Apacheのmod_headersモジュールを有効化
2. レスポンスヘッダーの追加
3. 設定の反映と再起動

以下は、最もシンプルなCORS設定の例です。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

この設定では、すべてのオリジンからのリクエストを許可します。mod_headersがロードされていない場合はエラーになりますので、事前にモジュールが有効化されているか確認してください。

設定ファイルの場所

• .htaccess：サイトルートや特定ディレクトリに設置し、ローカルで制御可能
• /etc/apache2/apache2.confまたは/etc/httpd/conf/httpd.conf：グローバル設定で適用
• 各VirtualHost設定ファイル

次のセクションでは、Apacheの設定ファイルを実際に編集してCORSを有効にする手順を詳しく説明します。

Apacheの設定ファイルを編集する手順

ApacheでCORSを有効にするためには、.htaccessやhttpd.confなどの設定ファイルを編集し、必要なヘッダーを追加します。ここでは、具体的な編集方法を段階的に説明します。

1. mod_headersモジュールの有効化

ApacheでCORSを設定するには、mod_headersモジュールが必要です。以下のコマンドでモジュールを有効化します。

sudo a2enmod headers

その後、Apacheを再起動して変更を反映します。

sudo systemctl restart apache2

mod_headersがすでに有効になっている場合は、この手順は不要です。

2. .htaccessファイルの編集

特定のディレクトリやファイルに対してCORSを設定する場合は、.htaccessファイルを使用します。対象のディレクトリに.htaccessファイルを作成または編集し、以下のように記述します。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET,POST,OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>

この例では、すべてのオリジンからのリクエストを許可し、GET、POST、OPTIONSメソッドを使用可能にしています。Content-Typeヘッダーも許可します。

3. httpd.confまたはapache2.confの編集

サーバーレベルで一括してCORSを設定したい場合は、httpd.confまたはapache2.confファイルを編集します。ファイル内の適切な場所に以下を追加します。

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

この設定では、/var/www/htmlディレクトリ内のファイルに対してCORSを適用し、https://example.comからのリクエストのみを許可します。

4. VirtualHost設定でのCORS有効化

特定のVirtualHostに対してCORSを設定することも可能です。/etc/apache2/sites-available/000-default.confなどのVirtualHost設定ファイルを編集します。

<VirtualHost *:80>
    ServerName example.com
    DocumentRoot /var/www/html

    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
        Header set Access-Control-Allow-Methods "GET,POST,OPTIONS"
        Header set Access-Control-Allow-Headers "Content-Type"
    </IfModule>
</VirtualHost>

5. 設定を反映してApacheを再起動

設定を保存したら、Apacheを再起動して変更を反映します。

sudo systemctl restart apache2

これでApacheにおけるCORSの基本的な設定は完了です。次のセクションでは、静的ファイルに対する具体的なCORS設定の例を見ていきます。

CORS設定の具体例（静的ファイルへの適用）

静的ファイル（CSS、JavaScript、画像など）に対してCORSを適用することで、他のオリジンからのリクエストが許可されます。これは、CDNや外部サービスから静的リソースをロードする際に必要になります。ここでは、具体的な設定例を示します。

1. 静的ファイル全体にCORSを適用する

すべての静的ファイルに対してCORSを適用する場合、Apacheの設定ファイル（.htaccessやhttpd.conf）で特定のディレクトリを対象に設定します。

<IfModule mod_headers.c>
    <Directory "/var/www/html/static">
        Header set Access-Control-Allow-Origin "*"
        Header set Access-Control-Allow-Methods "GET,OPTIONS"
        Header set Access-Control-Allow-Headers "Content-Type"
    </Directory>
</IfModule>

• /var/www/html/static：静的ファイルが格納されているディレクトリ
• Access-Control-Allow-Origin "*"：すべてのオリジンを許可

これにより、/staticディレクトリ内のすべてのファイルにCORSが適用されます。

2. 特定のファイルタイプに限定してCORSを設定する

CSSやJavaScriptなど、特定の拡張子を持つファイルのみにCORSを適用する場合は、FilesMatchを使用します。

<IfModule mod_headers.c>
    <FilesMatch "\.(css|js|jpg|png|svg|woff|woff2|ttf)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

• FilesMatch：正規表現でファイル拡張子を指定
• css|js|jpg|png|svg|woff|woff2|ttf：CSS、JS、画像、フォントファイルなどが対象

これにより、画像やフォントファイルなど、必要な静的リソースのみにCORSを適用できます。

3. 画像ファイルだけにCORSを適用する

画像だけにCORSを設定したい場合は、以下のように記述します。

<IfModule mod_headers.c>
    <FilesMatch "\.(jpg|jpeg|png|gif|svg|webp)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

これにより、異なるオリジンからの画像読み込みが許可されます。Webフォントや動画など、他のファイルタイプも必要に応じて追加できます。

4. 特定のオリジンだけを許可する

すべてのオリジンを許可するのではなく、特定のオリジンのみを許可する場合は、以下のように設定します。

<IfModule mod_headers.c>
    <FilesMatch "\.(css|js|png|jpg|svg)$">
        Header set Access-Control-Allow-Origin "https://example.com"
    </FilesMatch>
</IfModule>

• https://example.com：許可するオリジン
• 他のオリジンからのリクエストは拒否されます。

5. CORSを無効化する例

一部のディレクトリやファイルでCORSを無効にしたい場合は、次のように設定します。

<IfModule mod_headers.c>
    <Directory "/var/www/html/private">
        Header unset Access-Control-Allow-Origin
    </Directory>
</IfModule>

この設定により、/privateディレクトリ内のリソースはクロスオリジンでアクセスできなくなります。

6. プリフライトリクエストの処理

クロスドメインのリクエストでは、ブラウザがプリフライトリクエスト（OPTIONSメソッド）を送信する場合があります。これに対応するため、次の設定を追加します。

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

これにより、すべてのオリジンからのプリフライトリクエストが許可され、クライアントは問題なくリソースにアクセスできるようになります。

特定のオリジンのみ許可する設定方法

CORSの設定でセキュリティを強化するためには、すべてのオリジン（*）を許可するのではなく、信頼できる特定のオリジンだけを許可する方法が推奨されます。これにより、不正なクロスオリジンリクエストを防ぎ、セキュリティリスクを軽減できます。

1. 単一のオリジンを許可する

特定のドメインからのアクセスのみを許可する場合は、以下のように設定します。

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

• https://trusted-domain.com：許可するオリジンを指定
• 他のオリジンからのリクエストは拒否されます。

これにより、信頼されたオリジンからのみリソースのアクセスが可能になります。

2. 複数のオリジンを許可する

複数のオリジンを許可する場合は、条件分岐を使う必要があります。ApacheにはSetEnvIfを利用した方法があり、次のように設定します。

<IfModule mod_headers.c>
    SetEnvIf Origin "https://trusted-domain1.com" ORIGIN_OK
    SetEnvIf Origin "https://trusted-domain2.com" ORIGIN_OK
    Header set Access-Control-Allow-Origin "%{ORIGIN_OK}e" env=ORIGIN_OK
    Header set Access-Control-Allow-Methods "GET,POST,OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>

• trusted-domain1.comとtrusted-domain2.comの両方からのリクエストを許可します。
• 許可されていないオリジンからのリクエストは拒否されます。

3. 動的にオリジンを許可する方法

さらに高度な設定として、動的にオリジンを許可する方法があります。リクエストのOriginヘッダーをそのまま反映する設定方法です。

<IfModule mod_headers.c>
    SetEnvIf Origin "^https://(trusted-domain1\.com|trusted-domain2\.com)$" ORIGIN_OK=$0
    Header set Access-Control-Allow-Origin "%{ORIGIN_OK}e" env=ORIGIN_OK
    Header set Access-Control-Allow-Methods "GET,POST,OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>

• 正規表現を使い、複数のオリジンをマッチさせます。
• 信頼されたオリジンからのリクエストのみが許可されます。

4. 許可するオリジンのリストを外部ファイルで管理する

許可するオリジンのリストが多い場合、外部ファイルで管理する方法もあります。以下の例では、リストファイルを読み込んでCORSを適用します。

<IfModule mod_headers.c>
    Include /etc/apache2/cors-origins.conf
</IfModule>

• /etc/apache2/cors-origins.confファイルにオリジンのリストを記述します。

Header set Access-Control-Allow-Origin "https://trusted-domain.com"
Header append Access-Control-Allow-Origin "https://another-trusted-domain.com"

5. オリジンごとの個別設定

特定のリソースごとに異なるオリジンを許可することも可能です。

<IfModule mod_headers.c>
    <Location /api/secure-data>
        Header set Access-Control-Allow-Origin "https://secure-client.com"
    </Location>
    <Location /public/images>
        Header set Access-Control-Allow-Origin "*"
    </Location>
</IfModule>

• /api/secure-dataは特定のオリジンのみ許可
• /public/imagesはすべてのオリジンを許可

6. ワイルドカードの使用を避ける理由

• セキュリティリスク：すべてのオリジンを許可する*は、意図しないクロスオリジン攻撃を許す可能性があります。
• Cookieや認証情報の問題：Access-Control-Allow-Credentials: trueと一緒に*を指定するとエラーになります。特定のオリジンを指定する必要があります。

Header set Access-Control-Allow-Origin "https://trusted-site.com"
Header set Access-Control-Allow-Credentials "true"

これにより、認証情報を含むリクエストが許可されます。

次は、CORS設定後の動作確認とトラブルシューティングについて解説します。

CORS設定の確認とトラブルシューティング

CORSの設定が完了したら、正しく動作しているかを確認する必要があります。設定ミスがあると、リソースがブロックされる可能性があります。ここでは、CORS設定の確認方法と、よくある問題への対処法を解説します。

1. CORS設定の確認方法

CORS設定が正しく適用されているかを確認するには、以下の方法を試します。

1.1 ブラウザのデベロッパーツールで確認

1. ChromeやFirefoxでページを開き、F12キーを押してデベロッパーツールを開きます。
2. 「ネットワーク」タブを選択し、CORSが適用されたリソース（CSS、JavaScriptなど）を確認します。
3. リクエストの「レスポンスヘッダー」にAccess-Control-Allow-Originが含まれているか確認します。

   Access-Control-Allow-Origin: https://trusted-domain.com

4. エラーが表示されている場合、「コンソール」タブでエラーメッセージを確認します。

1.2 cURLコマンドで確認

ターミナルやコマンドプロンプトで以下のコマンドを実行し、CORSヘッダーが正しく返されているか確認します。

curl -I https://example.com/static/file.js

成功していれば、次のようなレスポンスが得られます。

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,OPTIONS

エラーが発生した場合、CORSが設定されていないか、設定が誤っている可能性があります。

2. よくあるCORSエラーと対処法

2.1 エラー1：No ‘Access-Control-Allow-Origin’ header is present

原因：サーバーがCORSヘッダーを返していません。
対処法：mod_headersが有効になっているか確認し、Apacheの設定ファイルに以下を追加します。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Apacheを再起動して変更を反映します。

2.2 エラー2：Request header field is not allowed by Access-Control-Allow-Headers

原因：リクエストで送信したカスタムヘッダーがAccess-Control-Allow-Headersに含まれていません。
対処法：必要なヘッダーを許可するように設定を追加します。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "Content-Type,Authorization"
</IfModule>

2.3 エラー3：Method not allowed

原因：リクエストメソッド（POSTやDELETEなど）がAccess-Control-Allow-Methodsに含まれていません。
対処法：許可するメソッドを追加します。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE"
</IfModule>

2.4 エラー4：CORS preflight request fails

原因：プリフライトリクエスト（OPTIONS）が失敗しています。
対処法：プリフライトリクエストを処理するために、OPTIONSメソッドを許可します。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET,POST,OPTIONS"
</IfModule>

3. ブラウザキャッシュの影響を確認

CORSのエラーが解消されない場合、ブラウザキャッシュが原因で古いレスポンスが返されている可能性があります。デベロッパーツールで「キャッシュを無効化してリロード」するか、以下のヘッダーを追加してキャッシュを無効にします。

Header set Cache-Control "no-store, no-cache, must-revalidate"

4. Apacheのエラーログを確認

ApacheのエラーログにもCORS関連のエラーが記録されている場合があります。以下のコマンドでログを確認します。

sudo tail -f /var/log/apache2/error.log

5. プリフライトリクエストのレスポンスをテスト

OPTIONSリクエストが正しく処理されるかテストします。

curl -X OPTIONS -I https://example.com/api/data

次のようなレスポンスが返ってくれば、プリフライトリクエストは成功です。

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://trusted-domain.com
Access-Control-Allow-Methods: GET,POST,OPTIONS

CORS設定を正しく行うことで、クロスドメインのリクエストが安全に行えるようになります。次は、記事のまとめに進みます。

まとめ

本記事では、ApacheでCORS（Cross-Origin Resource Sharing）を設定して、静的ファイルをクロスドメインで配信する方法を解説しました。CORSは、同一オリジンポリシーによる制限を緩和し、安全に異なるオリジンからのリソースアクセスを可能にする重要な仕組みです。

ApacheでCORSを有効にする基本的な手順から、特定のファイルタイプやディレクトリに限定してCORSを適用する方法、特定のオリジンのみを許可するセキュリティ強化策までを網羅しました。さらに、設定後の確認方法や、よくあるエラーへの対処法についても詳しく説明しました。

適切なCORS設定を行うことで、セキュリティを保ちつつ外部サービスとの連携やCDN経由でのリソース配信がスムーズに行えるようになります。今後のWeb開発において、CORS設定の最適化は欠かせないスキルとなるでしょう。