Viteの開発環境でリバースプロキシを利用して開発環境のAPIと通信する

やりたかったこと

vite コマンドで立ち上げたlocalhostの開発環境だと、データがない！ということで
MSWでテストデータを使用して開発していましたが、本物のAPIを利用したい

前提条件

• 開発環境はlocalhost（viteコマンドで立ち上げる）
• プレビュー環境はhttps://xxxで稼働（本物のAPIもここにある）
• フロントからはバックエンドのURLをenv記述してどこのAPIを利用するか指定する

問題

バックエンドのURLをhttps://xxxにするだけではだめなのでしょうか
->だめでした...
なぜ？
->localhostから本物のAPIを実行した際に、セキュリティ上の問題でクッキーが保存できないから
（API側の設定を変えればなんとかなるけど、それはあんまりしたくない）
今回はAPI側のSet-CookieのSameOriginがLaxになっていて、
Laxの場合fetchなどの非同期通信ではCookieが保存できないためできないようです

解決方法

https://xxxからアクセスしたことにすれば全て解決するのでは？
ということでリバースプロキシを使います
言葉で説明ができません、図で察して下さい

vite.config.tsから簡単に設定できるようです
今回はhttps://xxx/api を対象をしたいので、以下のように記述します

export default defineConfig(({ mode }) => {
  return {
    server: {
      proxy: {
        '/api': {
          target: 'https://xxx',
          changeOrigin: true,
        },
      },
    },
  };
});

開発者によってtargetのURLが違ったり、本番環境では対象外にしたいと思うので、
envで条件分岐して適宜うまいことやって下さい