【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=["*"],
)

コピペは正義、エラーメッセージには本当に忠実になろう

ということで、忘れたころにハマるのが、この文字列の入力ミスだが、本当にこれは、いろんなパターンで仕掛けてくる。

当然毎回、気をつけるようになるのだが、つい慣れてくるとまたやってしまう。。。

まあ、今回はエラーメッセージ見ても、「いや合っとるやんけ、エラーの拾い方がよくないんか？」という感じで、一周（半くらい）回って、ようやく発覚するパターンでしたが、前なら一周回ることすらなかったので、凡ミスが「凡」ミスと言えるということは成長の証、ということにしておこう。