很多人可能会疑惑为什么我们都使用了服务端渲染框架，还需要使用界面代理？事实上，大多数团队都有前后端分离的架构，并使用Java或其他后端语言开发和部署接口服务。这种情况下，我们自然只需要在服务器端通过代理将前端的请求转发给服务器即可。Nuxt3中提供的useFetch方法封装了很多网络请求的细节，但是由于渲染模式不同，该方法的使用也存在一些差异。下面，笔者将介绍在各种情况下如何为useFetch方法配置请求代理。如何配置？1、当渲染模式为客户端渲染时，Nuxt3官方最新版本使用nitro作为devserver。在其官方文档中，它解释了如何配置代理：{devProxy:{'/proxy/test':'http://localhost:3001','/proxy/example':{target:'https://example.com',changeOrigin:true}}}我们需要将配置proxy选项放到nuxt.config.ts文件的nitro选项中，如下：exportdefaultdefineNuxtConfig({//...othersettingserver:false,//不开启服务端渲染nitro:{devProxy:{"/api":{target:"http://localhost:3001",//这里是接口地址changeOrigin:true,prependPath:true,},},},});该方法对服务端渲染场景同样有效，但它只会代理发生在客户端的请求。比如设置server:false或者一些交互行为触发的网络请求。const{data:userinfo}=awaituseFetch("/api/userinfo",{server:false,});2.当渲染方式为服务端渲染或预渲染时，我们必须在服务端进行渲染，还需要通过代理转发服务端的请求，以上方法配置不可行。笔者全网搜索，发现很多解决方案都是安装一些Nodejs的第三方库来实现接口代理。其实大可不必。笔者在nitro的官方文档中找到了解决方案，即配置routeRules参数。exportdefaultdefineNuxtConfig({//...othersettingserver:true//启用服务端渲染或预渲染nitro:{devProxy:{"/api":{target:"http://localhost:3001",//这里是接口地址changeOrigin:true,prependPath:true,},},//这个配置用于服务端请求转发routeRules:{'/api/**':{proxy:'http://localhost:3001/**'}}},})践踏记录1.vite代理配置不生效从RC12开始，不再支持vite代理配置。下面描述的配置方法将不再可用。vite:{server:{proxy:{'/api':{target:'http://localhost:8080',},},},},2.服务器请求代理配置不生效。RouteRules支持代理配置。需要Nuxt3.2版本才能生效。作者升级版如下：结语博客原文地址：Nuxt3实战系列界面请求代理配置。欢迎广大读者朋友批评指正。联系作者：imwty2023（微信），iwhitney@163.com（邮箱）
