Nuxt + FastAPIでCORSエラーが出る場合

FastAPIでCORS関連のエラーによる対策を何度かしている気がするので

備忘録としてまとめておく

対策

基本的にはドキュメントを参考にした方が確実ですね

https://fastapi.tiangolo.com/ja/tutorial/cors/

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

app = FastAPI()

origins = [
    "http://localhost:3000",
    "http://localhost"
]

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

@app.get("/")
async def main():
    return {"message": "Hello World"}

ドキュメント通りではありますがこんな感じですね

originsをnuxtで使うポートに合わせてlocalhostも一応入れておきます

とりあえずこれで動きましたが場当たり的ではありますよねw

まぁ、どうせ本番は同じオリジンなので問題ないんですけどね

開発環境で別オリジンの時の開発効率を上げるtipsだと思ってください