Nuxt3结合Nitro配置baseURL时如何正确设置代理？

你的问题核心是baseURL前缀被带入了代理目标路径——因为Nitro的routeRules会自动结合app.baseURL的前缀进行路径匹配，默认的通配符代理会把包含baseURL的完整请求路径转发到目标地址，最终出现不符合预期的http://localhost:8080/basePath/api。以下是两种可靠的解决方式：

方法一：精确匹配路径并移除baseURL前缀 #

直接匹配带baseURL前缀的完整api路径，通过rewrite函数手动剥离baseURL部分：

export default defineNuxtConfig({
    nitro: {
        routeRules: {
            // 匹配带baseURL前缀的api路径
            "/basePath/api/**": { 
                proxy: {
                    to: "http://localhost:8080/api/**",
                    // 重写路径，去掉开头的/basePath
                    rewrite: (path) => path.replace(/^\/basePath/, '')
                }
            }
        }
    },
    experimental: {
        payloadExtraction: false
    },
    runtimeConfig: {
        public: {
            backUrl: ''
        }
    },
    app: {
        baseURL: "/basePath",
    }
})

方法二：动态适配任意baseURL #

如果不想硬编码baseURL，可以通过正则匹配移除路径的第一段（即baseURL），适合baseURL可能变化的场景：

export default defineNuxtConfig({
    nitro: {
        routeRules: {
            // 匹配所有包含/api的路径
            "**/api/**": { 
                proxy: {
                    to: "http://localhost:8080/api/**",
                    // 移除路径的第一个前缀段（即baseURL）
                    rewrite: (path) => path.replace(/^\/[^\/]+/, '')
                }
            }
        }
    },
    experimental: {
        payloadExtraction: false
    },
    runtimeConfig: {
        public: {
            backUrl: ''
        }
    },
    app: {
        baseURL: "/basePath",
    }
})

原理说明 #

当设置app.baseURL: "/basePath"后，Nuxt会为所有路由请求自动添加该前缀，你原始配置的"api/**"规则实际匹配的是"/basePath/api/**"路径。默认代理会将完整匹配路径替换到to的通配符位置，导致目标地址带上/basePath。通过rewrite函数修改转发前的路径，就能剥离多余的baseURL前缀，实现预期的代理效果。

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