APIコールにaxiosを使う場合のローカル実行でつまづく
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 虎太郎 |