こんにちは。開発環境アーキテクトとして、今日皆さんに「開発体験（DX）を劇的に向上させる魔法」を授けましょう。
フロントエンド開発の現場で、誰もが一度は直面する「CORS（Cross-Origin Resource Sharing）エラー」。ブラウザのコンソールに真っ赤な文字で「Blocked by CORS policy…」と出た瞬間、やる気が削がれますよね。
多くの初心者はここで「バックエンド側にCORS設定を追加してくれ」と頼みに行きます。しかし、それはアーキテクチャ上のアンチパターンです。開発環境のために、本番環境のセキュリティポリシーを汚すべきではありません。
解決策はシンプル。Viteが提供する「プロキシ機能」を使い、フロントエンドとバックエンドの境界をローカル開発環境で完全に消し去るのです。
—
1. なぜ「プロキシ」なのか？：ツールが抱える本質的な課題
Viteは開発中、メモリ上で動作する超高速なサーバーを提供します。ここでReactやVueを動かすわけですが、ブラウザは「オリジン（ドメイン＋ポート番号）」が異なるAPIへのアクセスをセキュリティ上の理由から遮断します。
これを解決するのが `server.proxy` です。
簡単に言うと、「ブラウザから見れば、APIリクエストはフロントエンドと同じサーバー（Vite）に対して投げられている」という状況を捏造する技術です。Viteは受け取ったリクエストを裏側でバックエンドへ転送し、レスポンスを返します。これにより、ブラウザはCORSの制限を一切受けなくなります。
2. 実践：`vite.config.ts` を最強の防波堤にする
では、具体的に設定を見ていきましょう。プロジェクトルートにある `vite.config.ts` を開いてください。ここに以下の設定を書き加えます。
import { defineConfig } from ‘vite’
import react from ‘@vitejs/plugin-react’
export default defineConfig({
plugins: [react()],
server: {
// 開発サーバーのポートを固定化する（推奨）
port: 3000,
proxy: {
// ‘/api’ で始まるリクエストを検知する
‘/api’: {
// バックエンドサーバーのURL
target: ‘http://localhost:8080’,
// オリジンヘッダーをターゲット先のホストに合わせる（重要！）
changeOrigin: true,
// パスから ‘/api’ を除去して転送する（例: /api/users -> /users）
rewrite: (path) => path.replace(/^\/api/, ”),
// 自己署名証明書などを扱う場合に便利
secure: false,
}
}
}
})
この設定が「現場で震えるほど役立つ」理由
- `changeOrigin: true`: これを忘れると、バックエンド側でホスト名の不一致により拒否されることが多々あります。Viteがリクエストヘッダーの `Origin` をバックエンド側に合わせて書き換えるため、バックエンドはリクエストが「自分自身からのもの」だと錯覚します。
- `rewrite`: API側に `/api` というプレフィックスがない場合、リクエストが404になります。これを正規表現でサクッと除去できるのはViteのプロキシならではの恩恵です。
3. 動作確認：ブラウザは「知らぬが仏」
設定が終わったら、フロントエンドからAPIを呼んでみましょう。
// フロントエンド側のコード例
fetch(‘/api/users’)
.then(res => res.json())
.then(data => console.log(‘データ取得成功:’, data));
ブラウザのネットワークタブを見てください。リクエストURLが `http://localhost:3000/api/users` になっているはずです。CORSエラーは発生しません。なぜなら、ブラウザから見れば「同じポート3000への通信」だからです。
Viteが裏で `http://localhost:8080/users` を叩き、結果をブラウザに返している。この「透過的なプロキシ」こそが、モダンなフロントエンド開発の基本姿勢です。
4. アーキテクトからのアドバイス：もっとスマートに
もし、バックエンドのAPIが非常に複雑で、複数のパスプレフィックスを使い分けている場合はどうすればいいか？その場合は、`proxy` オブジェクトに複数のキーを定義するだけで解決します。
proxy: {
‘/api’: ‘http://localhost:8080’,
‘/auth’: ‘http://localhost:9000’, // 認証系は別のマイクロサービスへ飛ばす、など
}
このように、Viteのプロキシを使いこなせば、バックエンドの物理的な構成を気にする必要はなくなります。
—
まとめ：今日から始める「ノンストレス開発」
CORS問題で消耗するのは今日で終わりにしましょう。
1. `vite.config.ts` に `server.proxy` を記述する。
2. `changeOrigin: true` でヘッダーを偽装する。
3. パスが合わないなら `rewrite` で整形する。
これだけで、あなたのローカル開発環境は、本番環境と遜色ない「クリーンなAPI連携」を手に入れることができます。
開発環境とは、本来「コードを書くことだけに集中できる場所」であるべきです。設定ファイル一つで解決できる小さなストレスを放置せず、アーキテクチャの力で解決していく。それが、一流のエンジニアへの第一歩です。
さあ、エディタに戻って `vite.config.ts` を書き換えてみてください。世界が変わるはずですよ。