Nuxt3代理配置无效排查：请求URL异常如何解决？

问题根源 #

你的代理配置本身无语法错误，但请求路径的写法导致代理规则未被触发：

• 使用$fetch('api/restaurants')时，路径会基于当前页面URL拼接（比如当前页面是http://localhost:3000/home，请求会变成http://localhost:3000/home/api/restaurants），而非根路径下的/api/restaurants，因此devProxy的/api匹配规则无法生效。

修复步骤 #

只需修改Pinia中的请求路径，给api前缀添加斜杠：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    restaurant: [],
  }),
  actions: {
    async getRestaraunts() {
        // 添加斜杠确保请求根路径下的/api，触发代理规则
        const { data } = await $fetch('/api/restaurants')
        console.log(data)
    },
  },
})

额外验证点 #

1. 确认目标服务http://localhost:1337正在正常运行，且/api/restaurants接口可访问
2. devProxy仅在开发环境生效，生产环境需通过反向代理（如Nginx）或Nuxt runtimeConfig管理接口地址

内容的提问来源于stack exchange，提问作者Maxim