nuxt3：nitro devProxy（本地代理）

小灰灰 2024-03-27 11:37 59阅读 0赞

**一、背景**

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

vite：没有成功。

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

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

中间件方式：成功

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

**二、nitro本地代理**

nuxt.config.ts

![e32b552c94994692afa254b29b19822d.png][]

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

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

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

![e4d9dce452494d879e9253f2455ecbc7.png][]

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

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

![758906e880d44f0893599a650e46aac6.png][]

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

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

**四、相关内容**

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

[nuxt3 _-SNOW]: https://blog.csdn.net/snowball_li/article/details/129035109
[e32b552c94994692afa254b29b19822d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/0755156c511949ab93f16fd1a9cae93d.png
[e4d9dce452494d879e9253f2455ecbc7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/eb6b68f65514414199e7d994faba2ea8.png
[758906e880d44f0893599a650e46aac6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/321e435139c848aa9ef53e5c524959f8.png