概要

このセクションでは、HonoとReactを実際に連携させて「APIサーバー＋SPAフロントエンド」の構成を体験します。2つの独立したプロジェクトを作成し、CORSという仕組みにも触れていきます。

今回作るもの

Hono（バックエンド）とReact（フロントエンド）を別々のプロジェクトとして作成し、連携させます。

ブラウザ
    │
    │ http://localhost:5173
    ▼
┌────────────────────┐
│  React (Vite)      │
│  ポート: 5173      │
└────────────────────┘
    │
    │ fetch("http://localhost:3000/api/hello")
    ▼
┌────────────────────┐
│  Hono (Node.js)    │
│  ポート: 3000      │
└────────────────────┘

ReactアプリからHono APIにリクエストを送り、レスポンスを画面に表示します。

CORSとは

今回の演習では、ReactからHonoにリクエストを送ろうとするとCORSエラーに遭遇します。これはブラウザのセキュリティ機能によるものです。

オリジンとは

オリジンは「スキーム + ホスト + ポート」の組み合わせです。

ポート番号が違えば別のオリジンとして扱われます。

同一オリジンポリシー

ブラウザには同一オリジンポリシーというセキュリティ機能があります。これは「異なるオリジンへのリクエストを制限する」仕組みです。

この制限がないと、悪意あるWebサイトがユーザーの認証情報を使って勝手にAPIを呼び出せてしまいます。

悪意あるサイト (evil.com)
    │
    │ fetch("https://your-bank.com/api/transfer")
    ▼
銀行のAPI ← ユーザーのCookieが自動送信される！

同一オリジンポリシーは、このような攻撃からユーザーを守るための機能です。

CORS（Cross-Origin Resource Sharing）

では、自分のReactアプリから自分のHono APIを呼び出したい場合はどうするのでしょうか？

そこで使うのがCORSです。CORSは「このオリジンからのリクエストは許可する」とサーバーがブラウザに伝える仕組みです。

React (localhost:5173)                    Hono (localhost:3000)
    │                                          │
    │ GET /api/hello                           │
    │─────────────────────────────────────────►│
    │                                          │
    │ Response + Access-Control-Allow-Origin   │
    │◄─────────────────────────────────────────│
    │                                          │
ブラウザ: 「サーバーがOKと言ってるので許可する」

サーバーが Access-Control-Allow-Origin ヘッダーをレスポンスに含めることで、ブラウザはリクエストを許可します。

次の演習では、実際にCORSエラーに遭遇し、Honoの cors() ミドルウェアで解決する流れを体験します。

ポイント

• オリジン: プロトコル + ホスト + ポートの組み合わせ
• 同一オリジンポリシー: ブラウザが異なるオリジンへのリクエストを制限するセキュリティ機能
• CORS: サーバーが「このオリジンからのリクエストは許可する」と明示する仕組み
• Access-Control-Allow-Origin: 許可するオリジンを指定するレスポンスヘッダー