【初心者向け】CORSとは何か？仕組みと解決方法をやさしく解説！
Webアプリを開発していると、APIにアクセスしたときに
「CORSエラー」が出て困った経験、ありませんか？
この記事では、CORS（Cross-Origin Resource Sharing）の基本から、
なぜ必要なのか、そしてどうやってエラーを解消するかをわかりやすくまとめています。
✅ CORSってなに？
CORS（Cross-Origin Resource Sharing）
日本語では 「オリジン間リソース共有」。
簡単にいうと、異なるオリジン（Origin）間でデータをやり取りするための仕組みです。
🧭 そもそもオリジン（Origin）とは？
オリジンとは、以下の3つを組み合わせたものです：
- スキーム（例：
https） - ドメイン（例：
youtube.com） - ポート番号（例：
:443）
このURL全体が「オリジン」です。
下記のように、オリジンが違えば別物と見なされます。
https://youtube.com:443https://twitter.com:443
❌ なぜCORSが必要なの？
Webブラウザは 「同じオリジン」からのリクエストしか基本的に許可しません。
これには理由があって、悪意のある攻撃からユーザーを守るためです。
🔒 セキュリティ上の理由（例）
- 正規サイトにログイン済みのユーザーが、
- 悪意あるサイトを開いてしまう
- その悪意あるサイトがAPIを勝手に叩く
- Cookieも勝手に送られてしまい、なりすまし成功…
こういった「クロスサイト攻撃」を防ぐため、デフォルトではブロックされるようになっています。
🤔 でも開発中は不便…
開発中に以下のような状況でよく困ります。
フロントエンド → localhost:5500
バックエンド（API） → localhost:5000
このとき、フロントエンドからバックエンドに値を渡すときに
たったポート番号が違うだけですが、オリジンが異なると判断され、CORSエラーになります。
✅ 解決策：CORSを許可してあげる
Node.js + Express であれば、corsモジュールを使って設定できます。
① corsモジュールをインストール
npm install cors
② ミドルウェアとして使う
const express = require('express');
const cors = require('cors');
const app = express();
app.use(
cors({
origin: "http://127.0.0.1:5500", // 許可したいオリジン
methods: ["GET", "POST"], // 許可したいHTTPメソッド
credentials: true // Cookieを許可するかどうか
})
);
app.listen(5000, () => {
console.log("APIサーバー起動中");
});
これで、ポート5500からのアクセスが許可されます。
🏰 イメージ：門番がオリジンをチェックする感じ
┌──────────────┐
│ クライアント │ ← http://localhost:5500
└──────────────┘
│
▼
┌──────────────┐
│ APIサーバー │ ← http://localhost:5000
└──────────────┘
↑
「このオリジンは許可してる？ → OK、通してよし！」
サーバーが“許可されたオリジン”だけを通す、門番のような仕組みです。
📌 補足：CORSはブラウザの仕様
Postman や curl は CORS を無視できます（サーバーと直接通信するため）
CORS を制御しているのは ブラウザ側です
✅ まとめ
項目 内容
CORSとは？ オリジン間でリソースを安全に共有する仕組み
なぜ必要？ クロスサイト攻撃（XSSやCSRF）を防ぐため
開発中の問題 ポート違いなどでオリジンが違い、リクエストがブロックされる
解決方法 サーバー側でCORS設定を明示し、特定のオリジンを許可する
💬 最後に
CORSは一見ややこしく感じますが、サーバー側での明示的な許可設定がポイントです。
開発中や本番環境でも、しっかりとオリジンの制御を行って、安全で柔軟なWebアプリを作っていきましょう！