Viteでプロキシを設定する

やること

ローカル環境で、Vite + Reactから別のローカルサーバにリクエストを送る際にプロキシを使用します。
一応、構成としては以下のようになっています。

方法

vite.config.tsに、server.proxy設定を追加します。

vite.config.ts

export default defineConfig({
  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080/",
+        changeOrigin: true
+      }
+    }
+  }
})

上記の設定を追加することで、fetch("/api/users")のようにバックエンドサーバ向けのリクエストをした際にlocalhost:8080/api/usersへリクエストされるようになります。

参考