🔒 HTTPSとCORSを理解する

このページで学ぶこと

HTTPSとHTTPの違いがわかる
CORSとは何か、なぜエラーが起きるかがわかる
CORSエラーが出たときに対処できる

HTTPS とは

HTTP の通信は暗号化されていません。喫茶店の Wi-Fi など、同じネットワーク上にいる人に通信内容を盗み見られる可能性があります。

HTTPS（HTTP + TLS）は通信を暗号化します。

現代の Web サービスは必ず HTTPS を使います。
Vercel や Supabase などのサービスは、デプロイ (アプリをサーバーで公開すること) すると自動で HTTPS になります。

CORS とは

CORS（Cross-Origin Resource Sharing）は、異なるオリジン間のリクエストを制御する仕組みです。

オリジンとは プロトコル + ドメイン + ポート番号 の組み合わせです。

基準を http://localhost:3000 としたとき、次のように判定します。

URL	何が違う？	判定
`http://localhost:3000/users`	何も違わない（path は判定に含めない）	同一オリジン
`http://localhost:4000`	ポート番号が違う（3000 → 4000）	別オリジン
`https://localhost:3000`	プロトコルが違う（http → https）	別オリジン
`http://example.com:3000`	ドメインが違う（localhost → example.com）	別オリジン

つまり、プロトコル・ドメイン・ポートのうち1つでも違えば別オリジンです。

なぜ CORS が必要か

悪意のあるサイトが、あなたのブラウザを使って別のサービスにリクエストを送る攻撃（CSRF）を防ぐためです。
ブラウザは「知らないオリジンからのリクエストはブロックする」というルールを持っています。

CORS エラーが起きる典型的な状況

解決方法

サーバー側で「このオリジンからのリクエストは許可する」と明示します。

Next.js API Routes の場合 (現時点ではNext.jsが未インストールのため、以下のコードは実行できません)：

// pages/api/hello.js
export default function handler(req, res) {
  // 特定のオリジンを許可する
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
  res.status(200).json({ message: 'Hello!' })
}

Supabase (クラウドサービス、Webコースで学習) を使う場合
Supabase のダッシュボードで許可するオリジンを設定できます。
開発中は自動で localhost が許可されていることが多いです。

CORSエラーに遭遇したら

開発中によく見るエラーです。慌てず対処しましょう。

Access to fetch at 'http://...' from origin 'http://localhost:3000'
has been blocked by CORS policy

チェックリスト：

リクエスト先のサーバーで CORS の設定がされているか
許可するオリジンに自分の URL（http://localhost:3000 など）が含まれているか
プリフライトリクエスト（OPTIONS）への対応が必要か

確認しよう

HTTPS と HTTP の違いを説明できる
オリジンとは何かを説明できる
CORS エラーが出たとき、なぜ起きているかがわかる

AIに聞いてみよう

「CORSのプリフライトリクエストとは何ですか？初心者向けに説明してください」

「CSRF攻撃について詳しく教えてください。また、CORS以外の対策方法も教えてください」

次のステップ

ここまでで「Web・プログラミング基礎」は完了です。お疲れさまでした！
メンターに「基礎が終わりました」と連絡して、コースの次のステップに進みましょう。

→ Webコースの人: Webコースへようこそ
→ Flutterコースの人: なぜFlutterを使うのか