🚀
VS Code + Live Serverで開発中に、CORS対応されてないAPIを呼び出す際に役立つproxy機能
どんな時に使うのか？
手軽にWebサーバーと立てるには、VS Code の機能拡張であるLive Serverが便利です。
JavaScriptからfetch()を使ってWebAPIを呼び出すケースは頻繁にありますが、API側がCORS対応していない場合、ブラウザーがAPI呼び出しを弾いてしまいます。
例えばAPI側がPython等のコードから呼び出すことを想定していて、ブラウザからの呼び出しを想定していないケースで起こります。 （今回の場合、VS Code + AI Toolkit で立てたWebAPIを利用する際に発生しました）
本番サービスではリバースプロキシや中継サーバーを挟んで対処することになりますが、開発環境では手軽に済ませたいです。そんな時に、Live ServerのProxy機能が役に立ちます。
Proxy機能の概要
今回の用途では、次のようにクライアント(JavaScriptのコード)とサーバー(WebAPI)の、間にLiveServerが入って通信の中継を行います。それによってCORSが発生していないようにブラウザには見えるようになります。
Live Server の設定
機能拡張の歯車マークから、「機能拡張の設定」を開きます。
設定の中から、Live Server > Settings Proxy を探し、詳細を設定します。
- enable: true （proxy機能を有効にする場合）
- baseUri: LiveServerのWebサーバー上の相対uri
- proxyUri: 転送先のuri
ポートがデフォルトの5500のままの場合、この図の例では次のようにLiveServerを経由してアクセスすることが出来ます。
- ブラウザーのJS →
http://localhost:5500/searchapi→https://api.example.com/search
Discussion