【Nuxt.js】クライアントサイドCORSエラーを解決！外部API連携時のサーバーサイドプロキシ活用術 (Gemini API, Claude Code対応)

Nuxt.jsでGemini APIやClaude Codeなどの外部APIを呼び出そうとした際、CORSエラーに遭遇してハマったので備忘録として残します。

この記事でわかること
[現象] ブラウザのコンソールに表示されるエラー
[環境] 利用技術構成
[原因] なぜCORSエラーが起きるのか？
[解決策] Nuxt.js のサーバーサイドプロキシを経由する
- 1. 修正前のコード（NGパターン）
- 2. 修正後の構成（OKパターン）
[まとめ] 安全なAPI連携のために

この記事でわかること

CORSエラーが発生する根本的な理由
Nuxt.jsのサーバーサイドプロキシ機能の仕組み
Gemini APIやClaude Codeとの連携を成功させる設定手順

[現象] ブラウザのコンソールに表示されるエラー

外部APIへリクエストを送信した際、コンソールに以下のメッセージが表示され、レスポンスが取得できない状態になりました。

Access to fetch at 'https://api.example.com/data' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

[環境] 利用技術構成

項目	詳細
フレームワーク	Vue.js 3 / Nuxt.js
HTTPクライアント	$axios / fetch API
ターゲットAPI	Gemini API, Claude Code 等

[原因] なぜCORSエラーが起きるのか？

ブラウザはセキュリティ上の理由（同一オリジンポリシー）から、異なるドメイン、プロトコル、ポートからのリソース要求にデフォルトで制限を設けています。

今回の場合、APIを提供するサーバー側がリクエスト元のオリジンを許可する Access-Control-Allow-Origin ヘッダーをレスポンスに含めていないため、ブラウザが「安全ではない」と判断して通信を遮断しています。

これは、API側が意図的にクライアント（ブラウザ）からの直接アクセスを制限している、あるいは単なる設定漏れにより発生します。

[解決策] Nuxt.js のサーバーサイドプロキシを経由する

ブラウザからの直接リクエストが制限されているなら、サーバー側（Nuxtサーバー）を経由してリクエストを投げることで回避できます。サーバー間通信にはCORSの制限は適用されません。

1. 修正前のコード（NGパターン）

// クライアントサイドでの直接的なAPIリクエスト
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

2. 修正後の構成（OKパターン）

まず、nuxt.config.js にプロキシ設定を追加し、環境変数を準備します。

// nuxt.config.js
export default {
  axios: {
    proxy: true,
    prefix: '/api/'
  },
  proxy: {
    '/api/': {
      target: process.env.NUXT_PUBLIC_API_URL,
      pathRewrite: { '^/api/': '' }
    }
  }
}

// .env
NUXT_PUBLIC_API_URL=https://api.example.com

コンポーネント内では、ベースURLではなくプロキシのプレフィックスを指定してリクエストを行います。

// pages/index.vue
<script setup>
import { useNuxtApp } from '#app';

const { $axios } = useNuxtApp();

async function fetchData() {
  try {
    // Nuxtサーバーが /api/data を https://api.example.com/data に転送します
    const response = await $axios.get('/api/data');
    console.log(response.data);
  } catch (error) {
    console.error('CORS解決失敗:', error);
  }
}

fetchData();
</script>