nuxt.js 服务端转发 api 的 Set-Cookie header 到客户端

在服务端渲染的情况下请求接口，如果接口这个时候返回了一个 Set-Cookie 的 Header。nuxt.js 并不会自动的转发到客户端，因此需要手写一个插件来实现。该插件依赖于 @nuxtjs/axios、lodash

不废话，直接在 plugins 目录创建一个 server-cookie.js 文件，写入以下代码：

/**
 * 此插件用于转发axios获取到的set-cookie请求头
 * @param app context 注入的 app
 * @param res context 注入的 response
 * @param inject
 */
export default ({ app, res }, inject) => {
    let axios = app.$axios;
    axios.onResponse((response) => {
        if (response.headers.hasOwnProperty("set-cookie") && process.server) {
            // 设置cookie
            let apiSetCookie = response.headers["set-cookie"];
            let oldSetCookie = res.getHeader("set-cookie");
            if (oldSetCookie) {
                oldSetCookie.push(...apiSetCookie);
            } else {
                oldSetCookie = apiSetCookie;
            }
            res.setHeader("Set-Cookie", oldSetCookie);
        }
    })
}

插件很简单，就是给axios添加一个 response 拦截器，拦截到的 response.headers 中有set-cookie 字段时，将 set-cookie 添加到服务端返回给客户端的 response.headers 中。

写完后记得在 nuxt.config.js 中注册插件