How do I set proxy in Nuxt3?

Question

I try to start a nuxt3 program, now I want to set server proxy. A request to http://localhost:3000/api/v1 is supposed to return a response from our backend server on http://39.98.58.238:8594 , but now it gives me a 404 page.

At first, I follow the vite.js docs to set nuxt.config.js file

nuxt.config.js

export default defineNuxtConfig({  
  ...  
  vite: {
    server: {
      proxy: {
        '/api': {
          target: 'http://39.98.58.238:8594',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
    }
  },
})

page

<script setup>
  async function test() {
   await usefetch('/api/v1/xxx')
  }
</script>
<template>
  <div>
    <button @click="test">check</button>
  </div>
</template>

It didn't work, my request returned a 404 page. Then I try to follow this issue: text, do not use vite proxy

nuxt.config.js

export default defineNuxtConfig({
  nitro: {
    devProxy: {
        '/api/': {
            target: 'http://39.98.58.238:8594/',
            changeOrigin: true
        }
    }
  }
})

But it's still not work. What can I do to solve the problem? Thanks!!!

Answer 1

For those who are still wondering how to do this in production mode. I believe the answer is

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/proxy/example': { proxy: 'http://39.98.58.238:8594' },
      "/proxy/**": { proxy: '/api/**' },
    }
  }
})

You can find the docs here ⚠️ EXPERIMENTAL!