【Vue/Nuxt/Next】開発環境で頻発！CORSエラーを解決するプロキシ設定とAPIアクセス方法

Vue.jsやNuxt.jsのプロジェクトでAPIを叩こうとした際、コンソールに真っ赤なエラーが出てハマったので備忘録として残します。

この記事でわかること
[現象] ブラウザのコンソールに表示されるエラー
[環境]
[原因] 同一オリジンポリシーによる制限
[解決策1] 開発サーバーのプロキシ設定
[解決策2] サーバーサイドでのCORS許可設定
- Node.js + Express の例
[まとめ]

この記事でわかること

CORSエラーが発生する根本的な原因
Nuxt.js / Next.js の開発サーバーでプロキシを設定する方法
AxiosやFetch APIでの正しいリクエスト記述方法
サーバー側でのCORS許可設定（Express例）

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

外部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.

Axiosを使用している場合は、単純に Error: Network Error とだけ表示されることもあり、原因の特定に時間がかかることがあります。

[環境]

Frontend: Vue.js, Nuxt.js, Next.js
HTTP Client: Axios, Fetch API
API: 外部API、または自作のNode.js/Expressサーバー

[原因] 同一オリジンポリシーによる制限

この問題の正体は、ブラウザの同一オリジンポリシー（Same-Origin Policy）です。セキュリティ上の理由から、異なるオリジン（ドメイン、プロトコル、ポートのいずれかが異なる状態）へのアクセスは制限されています。

開発環境ではフロントエンドが http://localhost:3000、バックエンドが https://api.example.com のように別々のオリジンで動作しているため、サーバー側が許可（Access-Control-Allow-Originヘッダーの付与）をしていない限り、通信が拒否されます。

[解決策1] 開発サーバーのプロキシ設定

もっとも一般的な解決策は、開発サーバーにプロキシ（Proxy）を設定することです。ブラウザからのリクエストを一度自分の開発サーバーで受け取り、そこからバックエンドAPIへ転送することで、ブラウザから見れば「同一オリジン内での通信」に見せかけることができます。

Nuxt.js (nuxt.config.js) の場合

@nuxtjs/axios モジュールを使用している場合、設定は非常にシンプルです。

// nuxt.config.js
export default {
  axios: {
    proxy: true,
  },
  proxy: {
    '/api/': {
      target: 'https://api.example.com',
      pathRewrite: { '^/api/': '' }
    }
  }
}

Next.js (next.config.js) の場合

Next.jsでは rewrites 機能を使用して、パスを書き換えます。

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*',
      },
    ]
  },
}

フロントエンドの呼び出しコード修正

プロキシ設定後は、APIの絶対パスではなく、開発サーバー内（相対パス）へのリクエストに変更します。

状態	記述方法
Before	`axios.get('https://api.example.com/data')`
After	`axios.get('/api/data')`

[解決策2] サーバーサイドでのCORS許可設定

もし自身でAPIサーバーを構築している場合は、サーバー側でCORSを許可する設定を追加します。

Node.js + Express の例

const express = require('express');
const cors = require('cors');
const app = express();

// 開発環境のオリジンを許可
app.use(cors({
  origin: 'http://localhost:3000'
}));

app.get('/data', (req, res) => {
  res.json({ message: 'Success!' });
});

app.listen(8080);