🔒 HTTPSとCORSを理解する

このページで学ぶこと

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

HTTPS とは

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

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

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

CORS とは

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

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

なぜ CORS が必要か

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

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

解決方法

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

Next.js API Routes の場合：

// 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 を使う場合
Supabase のダッシュボードで許可するオリジンを設定できます。
開発中は自動で localhost が許可されていることが多いです。

CORSエラーに遭遇したら

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

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

チェックリスト：

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

確認しよう

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

AIに聞いてみよう

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

次のステップ

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

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