![見出し画像](https://assets.st-note.com/production/uploads/images/70795332/rectangle_large_type_2_fb0766140e763c76f46237ed270018c0.png?width=1200)
【FastAPI + Vue.js】CORS originエラーaxiosのめっちゃしょぼいとこでハマった話
ありがちなCORSオリジンエラーだけど、axios(Vue.js)側でarrow-origin設定したり、FastAPI側で、originを設定したり、はたまた、axiosにarrow-methodを追加したり色々わからないながら試行錯誤した結果、、、
originの末尾に'/'があったのがいけなかったという話。。。
originエラーは散々ハマったので、もちろんoriginのurlも見直したつもりだったけど、consoleで指摘されたurlコピペしたら、なんかズレてるって!?、ようやく気づいた(そういうとこやで・・・)
具体的に例示すると・・・
# (Fast)API側
app = FastAPI()
# 多分複数のURL(エンドポイント)を指定しておくと思うが・・・
origins = [
'http://hogehoge:8080/', # NG
'http://hogehoge:8080', # OK
'http://hogehoge:8080/login', # OK
]
app.add_middleware(
CORSMiddleware,
allow_origins = origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
コピペは正義、エラーメッセージには本当に忠実になろう
ということで、忘れたころにハマるのが、この文字列の入力ミスだが、本当にこれは、いろんなパターンで仕掛けてくる。
当然毎回、気をつけるようになるのだが、つい慣れてくるとまたやってしまう。。。
まあ、今回はエラーメッセージ見ても、「いや合っとるやんけ、エラーの拾い方がよくないんか?」という感じで、一周(半くらい)回って、ようやく発覚するパターンでしたが、前なら一周回ることすらなかったので、凡ミスが「凡」ミスと言えるということは成長の証、ということにしておこう。
この記事が気に入ったらサポートをしてみませんか?