Zenn
🙌

🌐 FastAPI 実践入門：第六歩目で学ぶ CORS 設定とフロントエンドとの連携

に公開
Python
FastAPI
CORS
zennfes2025free
tech

📥 はじめに

FastAPIでAPIを構築する際には、Vue.jsやReactといったモダンなフロントエンドフレームワークと連携する機会が非常に多くなります。こうした連携を実現するには、ブラウザのセキュリティ機構である「CORS（Cross-Origin Resource Sharing）」の正しい理解と設定が不可欠です。CORSは、異なるドメインやポート間の通信を制限することで、悪意あるスクリプトからのアクセスを防ぐ仕組みですが、設定が不適切だと正当な通信もブロックされてしまいます。
この記事では、FastAPIにおけるCORSの導入方法から、Vue.jsやReactとの実践的な連携方法までをステップバイステップで解説し、よくあるエラーとその対処法も紹介します。これにより、APIとフロントエンド間の通信がスムーズかつ安全に行えるようになります。

🧱 CORS（クロスオリジンリソース共有）とは？

ORS（Cross-Origin Resource Sharing）は、ブラウザが異なるオリジン（ドメイン・サブドメイン・ポート）間でリソースを共有できるかどうかを制御するためのセキュリティ機能です。標準では、JavaScriptを使ったクロスオリジンリクエストは制限されています。これを許可するためにCORSヘッダーをAPI側で明示的に付与する必要があります。
たとえば、次のような構成を考えてみましょう：

  • APIサーバー：http://localhost:8000
  • フロントエンド：http://localhost:3000

このように、異なるポートで動作している場合は、クロスオリジンとなり、CORSポリシーによってブロックされます。これを避けるためには、FastAPI側でCORSを許可する設定が求められます。

⚙️ FastAPIでCORSを有効にする

FastAPIは fastapi.middleware.cors.CORSMiddleware を提供しており、簡単にCORS対応が可能です。必要なモジュールをインポートし、add_middleware() を使って設定します。

📦 必要なインポート

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

✅ CORSの設定例

app = FastAPI()

origins = [
    "http://localhost:3000",
    "https://myfrontend.app"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

📝 各引数の意味

  • allow_origins: CORSを許可するドメインのリスト。* で全て許可も可能だがセキュリティ上非推奨。
  • allow_credentials: CookieやHTTP認証情報を含めるかどうか。
  • allow_methods: 許可するHTTPメソッド（GET, POST, PUTなど）。
  • allow_headers: リクエストに含まれるHTTPヘッダーの許可設定。

このように細かく設定することで、セキュリティと利便性のバランスがとれたAPIを構築できます。

🖥️ Vue/ReactアプリからAPIを呼び出す

CORSの設定が完了すれば、VueやReactといったフロントエンドアプリケーションからFastAPIのエンドポイントへ安全かつ確実にアクセスできます。

✅ Axiosで呼び出す例（Vue/React共通）

import axios from 'axios';

axios.get('http://localhost:8000/items')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

✅ fetchで呼び出す例

fetch('http://localhost:8000/items')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

📌 フロントエンドの注意点

  • リクエストURLはCORS設定と一致する必要があります。
  • HTTPS環境下では、APIサーバーもHTTPS対応が必要です。
  • 認証情報（トークンやCookie）を扱う場合、withCredentials や credentials: 'include' の指定が必要になる場合があります。

✅ CORSエラーが出たときの対処法

CORS関連のエラーが出た場合、以下の点をチェックすることで解決につながります。

  • Access-Control-Allow-Origin が設定されていない
    • allow_origins にフロントエンドのURLが正しく含まれているか確認。
  • クレデンシャルが許可されていない
    • Cookieやトークンが必要な通信では、allow_credentials=True を設定。
  • OPTIONSメソッドが拒否されている
    • 特に非GETリクエスト（POSTやPUT）では事前にプリフライト（OPTIONS）リクエストが発生し、それに正しく応答する必要があります。
  • ワイルドカードとクレデンシャルの併用は不可
    • allow_origins=["*"] と allow_credentials=True は同時に使えません。

🎯 まとめ

  • CORSは異なるオリジン間での通信における安全性と利便性の両立に重要。
  • CORSMiddleware を用いることでFastAPI側で柔軟に制御可能。
  • VueやReactとの組み合わせでは、事前にAPIのCORS対応を検証することで、トラブルを未然に防げる。

この第六歩目では、CORSの基礎とFastAPIの設定方法を了解し、実際のVue/対応Reactアプリとの連携を体験しました。
現代のウェブアプリ開発では、バックエンドのAPIをスムーズに連携させることが必須です。CORSは一要素にすぎませんが、適切な設定がされていることはユーザー体験に直結します。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp/

Discussion