nuxt3 api如何透传(不引第3方库)

背景：

nuxt做为一个vue的服务端渲染框架，本身就具备服务端的功能，理论上可以完整做一个系统功能，包括对数据库等等操作，但更合理的做法是nuxt应该定位只做服务端渲染的事情，更偏向ui层面，而非数据curd，业务逻辑，权限等等偏向服务端的逻辑。本身基于vue的服务端渲染已经也挺耗性能，所以应该单独规划一层，类似bff+ui；

按这个规划nuxt的数据来源就应该是透传到内部的服务器，那么怎样实现透传呢？

解决方案：

1.如果服务端设计的session存储方式是cookie，则可以通过配置nuxt.config.ts

routeRules: {"/sapi/**": {proxy: {to: "http://xxx/**",},},},

的方式，将本地请求地址/api/xx，完全代理到http://xxx/xx

类似nginx的代理功能；用nginx完全可以代替，性能可能还更好

2.如果服务端设计的是jwt，在header加其他字段保存的方式，那上面的方式就不行了

为什么不行？因为一个界面打开的时候，请求头是不会自动带任何自定义的东西的，这个功能只有cookie才能完成。所以如果登录后，刷新一个需要登录后的页面，这个获取不到页面任何凭证，所以会退出到登录页。要完整实现这种功能就需要做一些中间件拦截代理请求，将token获取到后，转成cookie下发到客户端，同时拦截客户端提交请求，将cookie的信息又转成header的信息再提交给代理。routeRules的proxy提供的配置项貌似完成不了这个功能，只能在server/middleware下面添加中间件处理


export default defineEventHandler(async (event) => {console.log('New request: ' + getRequestURL(event), getCookie(event, "name"))console.log('event.path ' + event.path)if (event.path.includes('/api/')) {let surl = event.path.replace('/api/', '/sapi/')const res = await $fetch(surl, {headers: {auth: "123456",cookie: getRequestHeader(event, "cookie")},server: true,method: "POST",body: { start: 0, limit: 5, mtype: "dev" },onResponse({ request, response, options }) {// Log response//setResponseHeaders(event, response.headers)setResponseHeader(event, "set-cookie", response.headers.getSetCookie())console.log("[fetch headers]", response.headers.getSetCookie());},});console.log(2);//const cookie = res.headers.get('set-cookie')//console.log('cookie: ' + cookie)console.log('Response: ' + JSON.stringify(res))return res;}})

每个请求都会经过，server/middleware 下面所有的文件进行拦截，除了routeRules配置的proxy匹配到的不会。

参考上述cookie处理的过程，改成对应jwt方案