nuxt3：nitro devProxy（本地代理）

快雪时晴-初晴融雪

已于 2023-05-18 17:34:42 修改

阅读量9.1k

点赞数 2

分类专栏：前端文章标签：前端 nuxt proxy

于 2023-02-02 16:39:53 首次发布

本文链接：https://blog.csdn.net/snowball_li/article/details/128851469

版权

前端专栏收录该内容

293 篇文章

订阅专栏

本文介绍了在Nuxt3中配置代理以解决跨域问题的方法，包括nitro的devProxy设置，以及在ssr模式下使用useFetch访问全路径接口的实践。中间件方式也被证实为一种成功策略。在nitro的本地代理中，/api前缀用于配合代理，请求时需添加相应前缀以避免错误。文章作者欢迎读者交流和指正。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景

nuxt3配置代理，尝试了各种方法。

vite：没有成功。

nitro：devProxy，代理成功，见本文。

ssr为true模式下，使用useFetch()访问全路径接口地址，这样是能访问通的，经过测试本地开发环境，项目部署后服务器环境，都没有问题。所以ssr模式可以这样使用，看到的资料中基本也都是这么用的。

中间件方式：成功

nuxt3 中间件方式接口转发实现跨域-SNOW

二、nitro本地代理

nuxt.config.ts

    nitro: {
        devProxy: {
            '/api': {
                target: 'https://md.abc.com.cn',
                changeOrigin: true,
            },
        }
    },

第一个“/api”是为了配合本地代理增加的，这里通过测试个人理解似乎是“/api”被替换成空了，类似在rewrite被替换成空字符串一样。所以如果接口地址前边不加这个会报错。

同理如果本地代理写成“/m-staff-center”，那么请求接口时候前边增加“/m-staff-center”。

const res = $fetch('/api/m-staff-center/api/v1/role/pageList')
console.log('32fetch', res)

经过测试，这样的方式，本地代理成功。401是接口返回的内容，没有登录。

三、欢迎交流指正，关注我，一起学习。

nitro 本地代理，为什么会这样呢，有待继续探索。欢迎留言指正。

四、相关内容

nuxt3 中间件方式接口转发实现跨域-SNOW