Nuxt3 usefetch proxy not work in SSR page, How fix it? Who can tell me why?

Question

I have a page, I want it to render the page through SSR, So I writing for this:

<script setup lang="ts">
const route = useRoute();

const id = route.params.id;

const { data: res, error } = await useFetch<Result<ProductDeatil>>(
  '/api/product/getProductById',
  { query: { id } }
);
<script>

And I have proxy config like this:

  nitro: {
    devProxy: {
      "/api/": {
        target: "http://localhost:8081/",
        changeOrigin: true,
      },
    },
  },

I think look like everything is ok, But, when i run npm run dev and open this page, my commond tell me :

 WARN  [Vue Router warn]: No match found for location with path "/api/product/getProductById?id=1831996465501712385"
 WARN  [Vue Router warn]: No match found for location with path "/api/product/getProductById"

And page is blank page, I am Very Confused! Why this '/api/product/getProductById' not proxyed???

This is my package.json:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --host 0.0.0.0",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@element-plus/nuxt": "^1.0.10",
    "cropperjs": "^1.6.2",
    "nuxt": "^3.12.4",
    "quill": "^2.0.2",
    "vue": "latest"
  },
  "devDependencies": {
    "sass-embedded": "^1.77.8"
  }
}

I searched for information and found a Korean blog(Nuxt3-proxy) that introduced many proxy methods. I tried almost all of them, but it didn't work unless I added the full service address in front of the URI, such as:

const { data: res, error } = await useFetch<Result<ProductDeatil>>(
  'http://localhost:3000/api/product/getProductById',
  { query: { id } }
);

If I add http://localhost:3000 to the url, the page can be rendered normally through SSR. I think this shows that there is no problem with my proxy configuration, but why it will not be proxied without adding http://localhost:3000, which makes me very distressed. Does anyone know why?

If you know the reason and how fix it, and willing to share it, I would be very grateful!

Answer 1

After some attempts, I found that configuring routeRutes can solve unexpected routing errors caused by useFetch, such as adding nitro.routeRutes configuration to nuxt.config below:

nitro: {
 routeRules: {
    "/api/**": {
      proxy: "http://localhost:8081/**",
    },
  },
  devProxy: {
    "/api/": {
      target: "http://localhost:8081/",
      changeOrigin: true,
    },
  },
}