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方案

其他补充：

$fetch的相关使用方式看ofetch

中间件相关的写法参考h3

nuxt内置的服务器是nitro 

参考：

https://github.com/unjs

https://github.com/unjs/h3

https://github.com/unjs/ofetch