APIコールにaxiosを使う場合のローカル実行でつまづく

更新:2021/06/17 00:44 by nasu38yen

Azure Static Web Apps の開発で
Nuxtデバッグ実行するとき、SPAホストとAPIホストが別々のサーバーで実行されるため
nuxtサーバー側にproxyの設定が必要になります。

nuxt.config.js

proxy: {
    '/api': { target: 'http://localhost:7071' }
},


これで、http://localhost:3000/api/hogehoge のAPIアクセスも無事処理されます。
yarn devでデバッグ実行時は気づかなかったのですが、
ログインを試すため、swa start http://localhost:3000 で実行すると、APIアクセスが失敗するようになりました。
SPAは localhost:4280 でホストされているのに、APIコールが依然として localhost:3000 に発射されます。
localhost:3000ではproxyが動いていて localhost:7071 にリレーはされるのですが、CORS例外が発生します。
APIコールは、 localhost:4280 に向けて発射されるべきです。
どうゆうこと!? localhost:3000 は、どこからセットされるのでしょう?

ちなみに、axiosを使わずfetchメソッドを使うと問題なく、localhost:4280/api に発射されます。
swaエミュレータは、なにも指定しなくても、/apiを localhost:7071 のproxyとして処理してくれるのです。

axiosコールを行うときに、nuxt登録されたaxiosモジュールを使うと、つまり、 $axios.$getを使うと
どうも固定でbaseURLにlocalhost:3000がセットされるようです。
実際、Nuxtサーバーがlocalhost:3000で動いているので、普通それで問題ないはずですよね;

nuxt登録モジュールを使わない、axios.get であれば、この問題は発生しませんでした。

import axios from "axios";

const res = await axios.get("/api/hoge");


しかしやはり、$axiosを使った方が良いですよね。
とりま応急対応として、$axiosのbaseURLに'/api'を設定する方針で切り抜けることにしました。
これであれば、Azure Static Web Appsにこのままデプロイしても問題なさげです。

axios: {
    baseURL: '/api',
},


ややこしいですよね! swaエミュレータを使った実行は、まあちょっとかなり混乱します。
最初からAPIが別サーバーになっていれば、こんなことでつまづくこともないでしょう;;
たぶん、そのことも忘れてしますので、ここにメモを残すことにします。

親ノート

Azure Static Web Apps 更新:2021/06/08 01:59 by 虎太郎