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!!!

Hygrograph

try to change /api/ to /api/v1 in your devProxy config inside nuxt.config.js. Look here – Pomiferous

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!

Mantooth

Answer 2

   export default defineNuxtConfig({  
        nitro: {
            devProxy: {
                "/devApi": {
                    target:"your url",
                    changeOrigin: true,
                    prependPath: true,
                }
            }
        },
    })

Tarpaulin

Works but not for SSR – Lycanthropy

Answer 3

Nuxt v3.11

.env

API_URL="https://example.com/api/**"

env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly API_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  routeRules: {
    "/api/**": { proxy: import.meta.env.API_URL },
  },
});

---

Benefits of this approach

Works both on the server side and on the client side. You can check using the ssr flag in defineNuxtConfig

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: false,
  routeRules: {
    "/api/**": { proxy: import.meta.env.API_URL },
  },
});

---

Allows you to do profiling.

.env.production

API_URL="https://example.com/api/**"

package.json

"scripts": {
  "dev": "nuxt dev --dotenv .env",
  "build:dev": "nuxt build --dotenv .env",
  "preview:dev": "nuxt preview --dotenv .env",
  "generate:dev": "nuxt generate --dotenv .env",
  "build": "nuxt build --dotenv .env.production",
  "preview": "nuxt preview --dotenv .env.production",
  "generate": "nuxt generate --dotenv .env.production",
  "postinstall": "nuxt prepare"
},

---

Possibility of using several proxies.

.env

API_URL="https://example.com/api/**"
API_URL_V2="https://example.com/api/v2/**"

env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly API_URL: string;
  readonly API_URL_V2: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  routeRules: {
    "/api/**": { proxy: import.meta.env.API_URL },
    "/api/v2/**": { proxy: import.meta.env.API_URL_V2 },
  },
});

Unreflecting

Hello! Thanks for your contribution to StackOverflow. Your answer looks good but could be improved by an explanation of the benefit of this approach over the other answers provided. – Epistrophe

Answer 4

For your example, it should be

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

Check the object key '/api' and the "target: '..../api'" property.

Sade