Nuxt3反向代理配置无效问题求助

核心问题分析 #

你的请求直接使用了完整URL http://localhost:3001/api/todos，这种情况下请求会绕过Nuxt服务器的代理机制，直接发送到目标端口，所以代理规则不会触发。此外，代理配置的路径匹配规则也可能存在精度问题。

具体修复步骤 #

1. 修改请求方式，使用相对路径 #

将useFetch的请求路径改为相对路径，让Nuxt服务器接管请求：

// 替换原请求代码
await useFetch<unknown>('/api/todos');

如果需要在客户端和服务端保持一致的请求行为，也可以显式指定baseURL为相对路径：

await useFetch<unknown>('api/todos', {
  baseURL: '/'
});

2. 调整代理配置，确保规则匹配精准 #

简化或修正proxy配置，避免路径匹配模糊：

// nuxt.config.ts 中的 proxy 配置调整为
proxy: {
  '/api/todos': {
    target: 'http://localhost:3003',
    changeOrigin: true,
    pathRewrite: { '^/api/todos': '/todoz' }
  }
}

或者保持数组形式，使用正则精确匹配路径：

proxy: {
  options: [
    {
      target: 'http://localhost:3003',
      changeOrigin: true,
      pathRewrite: {
        '^/api/todos': '/todoz'
      },
      pathFilter: ['^/api/todos$'] // 精确匹配完整路径
    }
  ]
}

3. 验证模块兼容性与服务重启 #

• 确保nuxt-proxy版本适配Nuxt3 rc.11，执行以下命令更新或重新安装依赖：

  npm uninstall nuxt-proxy
  npm install nuxt-proxy --save-dev
  

• 修改nuxt.config.ts后，必须重启Nuxt开发服务，否则配置不会生效。

4. 检查代理加载状态 #

启动Nuxt服务后，查看控制台日志，如果看到类似Proxy created: /api/todos -> http://localhost:3003的输出，说明代理规则已成功加载。

测试验证 #

重启服务后发起请求，查看网络请求的实际地址：应该会被代理到http://localhost:3003/todoz，而非直接访问localhost:3001/api/todos。

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