👋

@nuxtjs/proxyをNUXT3で使いたかったけど不要でした

2022/04/22に公開

開発中APIと連携して動作確認を~ということでCORSではまるので@nuxtjs/proxyを使ってリバースプロキシ設定しているかたも多いと思います。

どうやらNUXT3では@nuxtjs/proxyが動作しないようです。
私の環境では動作していたのですが突如動作しなくなったりと、どうにも安定しません。

困り果てて調べてたらどうやら、viteの設定でリバースプロキシ設定できるんやで。
みたいなことが書いてあったので、やってみました。

nuxt.config.ts
import { defineNuxtConfig } from "nuxt"

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  vite: {
    server: {
      proxy: {
        "/api/": {
          target: process.env.PROXY_API_URL,
          secure: false
        }
      }
    }
  },
})

こんな感じでやればいい感じにできるようです。
設定内容につきましては

https://ja.vitejs.dev/config/#server-proxy

を確認ください。

困ってる人もそれなりにいるようでしたので、一助になればと思い簡単にですが書いてみました。

Discussion