Nuxt.jsやVue.jsでGeminiやClaudeなどの外部APIを呼び出そうとした際に、CORSエラーでハマったので備忘録として残します。
この記事でわかること
- Nuxt.js CORSエラーが発生する根本的な原因
- Vue.js API fetchでブラウザ制限を回避する「プロキシ」的な設計
- サーバー経由 API呼び出し（Nitro）の具体的な実装手順
- Nuxt 外部API 連携を安全に行うためのプラクティス
[現象] ブラウザで発生する通信ブロック
フロントエンドから直接APIを叩くと、コンソールに以下のようなエラーが表示され、通信が失敗します。
Access to fetch at 'https://api.example.com/...' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.環境によっては TypeError: Failed to fetch とだけ表示されることもあり、原因特定に時間がかかる場合があります。
[環境]
- フレームワーク: Nuxt.js (Nuxt 3), Vue.js 3
- ライブラリ: $fetch, useFetch, axios
- 接続先: Claude API, Gemini API などの外部サードパーティAPI
[原因] 同一オリジンポリシーとCORS制限
このエラーの原因は、ブラウザのセキュリティ機能である同一オリジンポリシー（Same-Origin Policy）です。
異なるドメイン（オリジン）間のリソース共有を制限する仕組みであり、APIサーバー側が「このドメインからのアクセスを許可する」というヘッダーを返さない限り、ブラウザ側でリクエストが遮断されます。
[解決策] Nuxt.jsのAPIルート（Nitro）を活用する
1. サーバー経由でAPIを呼び出す (推奨)
サーバーサイド（Nitroエンジン）でリクエストを実行すれば、ブラウザのCORS制限を完全に回避できます。
Before (エラーが発生する直接呼び出し):
// pages/index.vue
const fetchData = async () => {
// ブラウザから直接叩くとCORS制限にかかる
const response = await fetch('https://api.example.com/data');
};After (APIルートを経由した安全な呼び出し):
まず、サーバーサイドのAPIルート server/api/external-data.ts を作成します。
export default defineEventHandler(async (event) => {
try {
// サーバー間通信にはCORS制限がありません
const response = await $fetch('https://api.example.com/data');
return response;
} catch (error) {
throw createError({ statusCode: 500, statusMessage: 'Failed to fetch' });
}
});次に、フロントエンド（Vueコンポーネント）から呼び出します。
<script setup>
// 自作したAPIルートを経由して呼び出す
const { data, error } = await useFetch('/api/external-data');
</script>2. APIサーバー側でCORSを許可する
もしAPIサーバーを自身で管理している場合は、レスポンスヘッダーに Access-Control-Allow-Origin を追加してください。
// Express.jsの例
const cors = require('cors');
app.use(cors({ origin: 'http://localhost:3000' }));3. レスポンス形式の確認
CORSを回避できても、パースエラーが発生することがあります。APIが返す Content-Type が application/json であるか、期待通りのJSON構造であるかを console.log 等で確認しましょう。
[まとめ] 外部API連携を成功させるポイント
| 項目 | 対応策 |
|---|---|
| ブラウザ制限 | NuxtのAPIルート（Nitro）をプロキシとして利用する |
| セキュリティ | APIキーを server/api 内で管理し、クライアントに露出させない |
| エラー対応 | APIサーバー側のCORS設定、またはレスポンスパースの修正を行う |
Nuxt.jsで開発しているなら、サーバー経由 API呼び出しが最もクリーンで安全な解決策です。CORSエラーに遭遇したら、まずはAPIルートへの移行を試してみてください！
