CORSとは何か？IT業界ブログ編集長が解説する安全なWeb通信の基本

a.kurogoシステム開発コメントを残す

「あれ、APIを叩いたらCORSエラーが出た…？」
あなたは今、そんな見慣れないエラーに直面していませんか？
実は、それはWeb開発者が必ず一度は遭遇する「あるセキュリティルール」に起因しています。

初めまして。IT業界でブログ編集長を務める者です。今回の記事では、WebエンジニアやこれからWeb開発を始める方が、決して避けて通れないCORS（Cross-Origin Resource Sharing）について、その本質から解決策までを徹底解説します。

この記事を最後まで読めば、CORSがなぜ存在するのか、そしてどのように対応すれば良いのかが明確に理解できます。煩わしいエラーに悩まされることなく、安全なWebアプリケーション開発を進めるための知識を、ぜひ手に入れてください。

目次

CORSとは何か？まずは「同一オリジンポリシー」を理解する

CORSを理解する上で、最も重要な前提知識が**「同一オリジンポリシー（Same-Origin Policy）」**です。

これは、Webブラウザに標準搭載されているセキュリティ機能で、**JavaScript**が別のWebサイトにあるリソース（APIやデータ）にアクセスするのを原則として禁止するルールです。

「オリジン」とは、以下の3つの要素の組み合わせを指します。

  • プロトコル: https:// または http://
  • ドメイン（ホスト）: blog.example.com
  • ポート番号: :8080 など

この3つがすべて一致しなければ、「同一オリジン」とは見なされません。例えば、https://blog.example.com のWebサイトから https://api.example.com にアクセスしようとすると、ドメインが異なるためブロックされます。

なぜCORSが必要なのか？セキュリティ上の重要性

では、なぜこのような厳しい制限が必要なのでしょうか？それは、ユーザーの安全を守るためです。

もし同一オリジンポリシーがなければ、悪意のあるWebサイトに埋め込まれたJavaScriptが、ユーザーが同時にログインしている銀行サイトやSNSのAPIに無断でアクセスし、個人情報を盗み取るといったことが可能になってしまいます。

CORSは、この厳格なルールを前提としつつ、「特定のサイトからのアクセスであれば、許可しますよ」と、Webサーバー側が**明示的に宣言**することで、必要な通信のみを例外的に許可するための仕組みなのです。

CORSエラーを解決する具体的な手順とヘッダー設定

いよいよ、CORSエラーを解決するための具体的な手順です。CORSはサーバー側で設定を行う必要があります。

  1. エラーの原因を特定する
    ブラウザの開発者ツール（F12）を開き、コンソールタブでCORSエラーメッセージを確認します。「No ‘Access-Control-Allow-Origin’ header is present on the requested resource.」のようなメッセージが出ていれば、CORS設定が原因です。
  2. サーバー側のCORS設定を追加する
    Webサーバーが返すHTTPレスポンスヘッダーに、以下の設定を追加します。

    • Access-Control-Allow-Origin: アクセスを許可するオリジンを指定します。
      • 特定のオリジンを許可する場合: Access-Control-Allow-Origin: https://www.your-site.com
      • すべてのオリジンを許可する場合: Access-Control-Allow-Origin: *（※セキュリティリスクを理解した上で使用）
    • Access-Control-Allow-Methods: 許可するHTTPメソッド（GET, POST, PUT, DELETEなど）を指定します。
      • 例: Access-Control-Allow-Methods: GET, POST
    • Access-Control-Allow-Headers: 許可するリクエストヘッダー（Content-Type, Authorizationなど）を指定します。
      • 例: Access-Control-Allow-Headers: Content-Type, Authorization

これらの設定をサーバー側のフレームワークやミドルウェアに組み込むことで、ブラウザがエラーを吐かずに通信を成功させることができます。

実践例：Node.js（Express）でCORSを有効にする方法

ここでは、Node.jsのWebフレームワーク**Express**を使った具体的な実装例を見ていきましょう。

**前提:**
– フロントエンド: http://localhost:3000
– バックエンド（API）: http://localhost:5000

この場合、フロントエンドからバックエンドのAPIを叩くと、オリジンが異なるためCORSエラーが発生します。これを解決するには、Expressのサーバー側でcorsミドルウェアを使用するのが一般的です。

ステップ1: corsパッケージをインストール
ターミナルで以下のコマンドを実行します。 

npm install cors

ステップ2: サーバーファイルに設定を追加
Expressのメインファイル（例: server.js）に以下のコードを追加します。 

const express = require('express');
const cors = require('cors'); // ①corsミドルウェアをインポート

const app = express();
const PORT = 5000;

// ②CORS設定を適用
app.use(cors({
    origin: 'http://localhost:3000', // 許可するオリジンを指定
    methods: ['GET', 'POST'],        // 許可するメソッドを指定
}));

app.get('/api/data', (req, res) => {
    res.json({ message: 'Hello from API!' });
});

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

解説:

  1. corsパッケージをインポートします。
  2. app.use(cors(...))で、CORSの設定をミドルウェアとして適用します。originオプションに、アクセスを許可したいフロントエンドのオリジンを指定します。

この設定をデプロイすれば、本番環境でもCORSエラーを回避できます。

まとめ：CORSを理解して安全なWeb開発を

この記事では、Web開発者が直面するCORSエラーの根本原因と、その解決策について解説しました。

CORSは、単なるエラーではなく、ユーザーのプライバシーとセキュリティを守るための重要な仕組みです。その本質を理解することで、なぜその設定が必要なのか、どうすれば安全な通信を実現できるのかが明確になります。

今回解説した内容を参考に、あなたのWebアプリケーションをより堅牢で安全なものにしてください。

関連記事

この記事があなたの役に立ったなら、ぜひSNSでシェアしてください！

コメントを残す

メールアドレスが公開されることはありません。必須項目には印がついています *