同ドメインなのにaxiosでのCORS policyエラーが起きた時の解決メモ

Vueでaxiosを使っているときに以下のようなエラーが出て、ハマってしまったので解決した方法を残しておきます。
ただ、あくまでこの方法でたまたまうまくいったという程度のものなので、根本的に理解して解決するにはほかのサイトを参照することをオススメします。

Access to XMLHttpRequest at 'http://localhost:5000/api/〇〇' from origin 'http://localhost:5000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

CORSとは

CORSはクロスドメイン通信を拒否する仕組みで、ドメインをまたいだ通信ができないみたいです。

なんとなく CORS がわかる...はもう終わりにする。 - Qiita
概要 Access to XMLHttpRequest at ' from origin ' has been blocked by COR...

なぜか相対パスにしたらうまくいった

今回はlocalhost:5000でサーバーを立てて、そこにREST APIも実装していたのですが、
REST APIにアクセスするために

axios
.get('http://127.0.0.1:5000/api/helloAPI')
.then(response => (this.info = response))

みたいな感じでaxiosを使っていたのですが、なぜかCORS policyでエラーが発生してしまいました。

うーん…
localhost:5000にアクセスして、その後にaxiosでlocalhost:5000にGETしてもCORSで引っかかるものなのかな?
あまり深く理解できていないのもあると思いますが、解決した方法としては絶対パスでなくて、相対パスとすることで解決することができました。

axios
.get('/api/helloAPI')
.then(response => (this.info = response))

タイトルとURLをコピーしました