Nuxt•3mo ago

Excluding /api/_nuxt_icon from Proxy

i’m working on a Nuxt project where i’ve configured a proxy to forward API requests to an external server. however, i’ve noticed that the /api/_nuxt_icon endpoint, which seems to be used by Nuxt for icon handling, is being proxied to my API web server (http://localhost:3030/api/**) instead of being served by Nuxt itself. this causes issues as the endpoint should be handled locally by Nuxt, not the external API server.
here's my nuxt config file:

export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  css: ["~/assets/style.css"],
  devtools: { enabled: true },
  modules: ['@nuxt/ui', '@nuxt/eslint', "@pinia/nuxt"],
  nitro: {
    routeRules: {
      "/api/**": {
        proxy: "http://localhost:3030/api/**",
      },
    },
  },
  appConfig: {
    API_URL: process.env.API_URL,
    API_KEY: process.env.API_KEY,
  },
  runtimeConfig: {
    API_URL: process.env.API_URL,
    API_KEY: process.env.API_KEY,
  }
});

export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  css: ["~/assets/style.css"],
  devtools: { enabled: true },
  modules: ['@nuxt/ui', '@nuxt/eslint', "@pinia/nuxt"],
  nitro: {
    routeRules: {
      "/api/**": {
        proxy: "http://localhost:3030/api/**",
      },
    },
  },
  appConfig: {
    API_URL: process.env.API_URL,
    API_KEY: process.env.API_KEY,
  },
  runtimeConfig: {
    API_URL: process.env.API_URL,
    API_KEY: process.env.API_KEY,
  }
});

how can i exclude the /api/_nuxt_icon endpoint from being proxied so that it is served by Nuxt’s local server instead of the external API server?

4 Replies

kapa.ai•3mo ago

Hi @reina. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To exclude the /api/_nuxt_icon endpoint from being proxied to your external API server, you need to add a more specific route rule before your general /api/** proxy rule. Nitro route rules are matched in order of specificity, so a more specific rule for /api/_nuxt_icon will take precedence over the catch-all /api/** rule. You can do this by setting an empty route rule for /api/_nuxt_icon, which will prevent it from being proxied:

export default defineNuxtConfig({
  // ...other config
  nitro: {
    routeRules: {
      "/api/_nuxt_icon": {}, // Exclude from proxying
      "/api/**": {
        proxy: "<http://localhost:3030/api/**",>
      },
    },
  },
  // ...other config
});

export default defineNuxtConfig({
  // ...other config
  nitro: {
    routeRules: {
      "/api/_nuxt_icon": {}, // Exclude from proxying
      "/api/**": {
        proxy: "<http://localhost:3030/api/**",>
      },
    },
  },
  // ...other config
});

This configuration ensures that requests to /api/_nuxt_icon are handled by Nuxt locally, while all other /api/** requests are proxied to your external API server. This approach is supported by the Nitro route rules system, which allows you to associate route patterns with specific behaviors, such as proxying or custom handling, and more specific patterns override less specific ones Docs: extendRouteRules. If you need to apply additional logic or behaviors, you can further customize the route rule for /api/_nuxt_icon as needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@516186529547288576> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

manniL•3mo ago

@reina catch-all nitro endpoint and use the proxyRequest fn from there

reinaOP•3mo ago

it's working now. thanks!

Gaming

Programming

Excluding /api/_nuxt_icon from Proxy

Did you find this page helpful?