Vue.jsでaxiosを使ってAPI通信を行おうとしたところ、CORSエラーにハマったので備忘録として残します。
フロントエンドの開発では必ずと言っていいほど遭遇するこの問題。本記事では、その正体と現場で使える具体的な解決策を解説します。
目次
この記事でわかること
- CORSエラーが発生する根本的な理由
- axios通信時に発生するエラーメッセージの読み解き方
- Viteを使用した開発環境でのプロキシ設定による回避策
[現象] ブラウザのコンソールに現れるエラー
APIリクエストを送った際、ブラウザのコンソールに以下のようなメッセージが表示され、通信がブロックされます。
Access to XMLHttpRequest at 'YOUR_API_ENDPOINT' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.[環境]
- Framework: Vue.js 3 (Vite環境)
- Library: axios
- API: 外部APIサーバー
[原因] 同一オリジンポリシーによる制限
このエラーの原因は、ブラウザが備える同一オリジンポリシー (Same-Origin Policy)というセキュリティ機能にあります。
リクエストを送る側（Vue.js）と受け取る側（APIサーバー）の「ドメイン」「ポート番号」「プロトコル」のいずれかが異なる場合、サーバー側が許可（Access-Control-Allow-Origin ヘッダーの返却）を明示していない限り、ブラウザ側でレスポンスの受け取りが拒否されます。
[解決策] プロキシ設定とサーバー側対応
修正方法には大きく分けて「開発環境での回避」と「サーバー側での許可」の2種類があります。
1. 開発環境での回避（Viteのプロキシ設定）
サーバー側をすぐに修正できない場合、vite.config.js でリクエストを中継してオリジンを合わせる方法が一般的です。
import { defineConfig } from 'vite';
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'YOUR_API_ENDPOINT_WITHOUT_SUFFIX',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
}
});設定後、axiosのコードを以下のように修正します。
// Before: 直接URLを指定するとCORSエラー
const response = await axios.get('http://api.example.com/endpoint');
// After: プロキシ経由でリクエスト
const response = await axios.get('/api/endpoint');2. サーバー側（Node.js / Expressの例）
本番環境を含めた根本解決には、サーバー側でCORSを許可します。
const cors = require('cors');
app.use(cors({
origin: '*', // 必要に応じて特定のドメインのみ許可
}));[まとめ]
| 方法 | 役割 | 適用場面 |
|---|---|---|
| Vite Proxy | フロント側で中継 | 開発環境で手軽に回避したい時 |
| CORS許可 | サーバー側で許可 | 本番環境での正式な対応 |
Vue.jsとaxiosでCORSエラーに遭遇しても、仕組みを理解すれば怖くありません。開発時はプロキシを、本番はサーバー設定を適切に行いましょう！
