プロキシの設定

API へ接続するためにプロキシを設定します。 localhost:5173/api/*へのリクエストを、自分のサーバーのlocalhost:8080へプロキシする設定を書きます。

プロキシとは

http://localhostにアクセスすると、npm run devで起動している手元のサーバーにリクエストが飛んで、index.htmlなどの静的なファイルがレスポンスとして返ってきます。ログインや街の情報の取得などは、リモートのサーバーに送信したいわけですが、localhost:5173から配信されているクライアントからlocalhost:8080に対してリクエストを送ろうとするとブラウザのセキュリティ機構に制限されたりと面倒なことがあります。これらを避けるために、localhost:8080/*へのリクエストをlocalhost:5173/api/*として手元のサーバーに送信し、手元のサーバーがブラウザの代わりにリモートのサーバーにリクエストを送信します。手元のサーバーは、リモートのサーバーからのレスポンスを透過的にブラウザに返却するので、ブラウザからはあたかもlocalhost:5173/api/*がレスポンスを返しているように見えます。このように、何らかの目的のために代理で通信するサーバーをプロキシサーバーと呼び、プロキシサーバーに通信を中継させることを「プロキシを挟む」と呼びます。

参考:
オリジン間リソース共有 (CORS) | MDN
プロキシ | Wikipedia

プロジェクトルートのvite.config.tsというファイルの内容を、以下の内容に変更します。

typescript

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path: string) => path.replace(/^\/api/, '/')
      }
    }
  }
})

TIP

VSCode の Settings からFormat on Saveにチェックを入れると、自動できれいなコードに直してくれます。

INFO

サーバーで CORS を設定することでもブラウザが通信できるようになります。クライアントとサーバーをそれぞれ別のオリジンで配信する場合はこちらの方法を用います。

e.Use(session.Middleware(store))
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{ 
	AllowOrigins: []string{"http://localhost:5173"}, 
	AllowMethods: []string{http.MethodGet, http.MethodPost}, 
})) 

e.POST("/login", loginHandler)
e.POST("/signup", signUpHandler)

この設定をした場合、以降の/api/*にアクセスしている部分をhttp://localhost:8080/*へアクセスさせるようにしてください。

プロキシの設定 ​

プロキシの設定