无法在 axios 响应中设置 cookie

Question

我正在使用 Nuxt.js 开发网站，我想调用 API 并将结果放入服务器端的 cookie

我将在 Nuxt.js 中间件中完成这一部分。 但是我可以调用 API，我可以设置 cookie，但我不能使用 API 响应设置 cookie。

调用API

import axios from 'axios'

export default ({ res, store }) => {
  if (process.server) {
    axios.get(process.env.tokenAPI)
      .then((response) => {
        const token = response.data.token
        // console.log(token) and the server console will log the result
      })
  }
}

设置饼干

export default ({ res, store }) => {
    res.setHeader('Set-Cookie', [`token=123456`]) // It works!!

}

结合它们

import axios from 'axios'

export default ({ res, store }) => {
  if (process.server) {
    axios.get(process.env.token)
      .then((response) => {
        const token = response.data.token
        res.setHeader('Set-Cookie', [`token=${token}`]) 
      })
  }
}

当我使用这段代码时没有设置 cookie，它应该从结果中设置 cookie

Answer 1

你能试试这个吗：

import axios from 'axios'
export default ({ res, store }) => {
  if (process.server) {
    axios.get(process.env.token)
      .then((response) => {
        document.cookie = "token="+response.data.token+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
      })
  }
}

Answer 2

这是因为中间件必须等待发送响应，直到您设置标头。

import axios from 'axios'

export default async ({ res, store }) => {
  if (process.server) {
    const response = await axios.get(process.env.token);
    const token = response.data.token;
    res.setHeader('Set-Cookie', [`token=${token}`]);
  }
}