Axios：如何手动附加 X-XSRF-TOKEN 标头？

Question

我正在使用 Vue 开发 SSR 应用程序。 API 是使用 Laravel 框架制作的，我正在使用 axios 向 API 发送请求。

我必须在服务器端发出一个 POST 请求以获取它的响应并在初始页面加载时呈现它。为了获取 POST 请求的 CSRF 令牌，Laravel API 提供了一个端点，以 JSON 形式发送 CSRF 响应（而不是 cookie，因为 cookie 不能在服务器端使用）。

我通过以下方式附加 csrf 令牌：

this._vm.$api.post('/api/ssr-csrf-token').then(response => {
    console.log("Token: ", response.data.token); // This shows that csrf is fetched correctly
    
    let config = {
        headers: {
          'X-XSRF-TOKEN': response.data.token
        }
    };

    this._vm.$api.post('/api/product/categories', { some: "thing"}, config).then(response => {
        console.log("Categories: ", response.data.data);
    }).catch(err => {
        console.log(err);
    })
}).catch(err => {
    console.log(err);
})

但是以这种方式发送请求仍然会出现 “CSRF 令牌不匹配” 错误。即使令牌附加到请求。

当我使用 Postman 在类别端点上获取结果时，一切正常，并且我得到了应有的响应。但是从我的 SSR 项目发出请求，我没有收到响应。

我需要做什么才能得到回复？任何帮助将不胜感激。

谢谢

Answer 1

您可以将令牌附加到 axios.defaults.headers.common。

下次当你打电话时，它会自动将你的令牌设置为标题。

this._vm.$api.post('/api/ssr-csrf-token').then(response => {
    console.log("Token: ", response.data.token); // This shows that csrf is fetched correctly

    // set token to your header
  axios.defaults.headers.common['Authorization'] =
      'Bearer ' + response.data.response.access_token;

    this._vm.$api.post('/api/product/categories', { some: "thing"}).then(response => {
        console.log("Categories: ", response.data.data);
    }).catch(err => {
        console.log(err);
    })
}).catch(err => {
    console.log(err);
})

现在您不必在请求中包含配置变量。它会自动设置为您所有通话的标题。