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

Posted 2023-03-28

【中文标题】Axios：如何手动附加 X-XSRF-TOKEN 标头？

【英文标题】：Axios: How to attach X-XSRF-TOKEN header manually?

【发布时间】：2022-01-12 20:38:47

【问题描述】：

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

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

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

this._vm.$api.post('/api/s-s-r-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 在类别端点上获取结果时，一切正常，并且我得到了应有的响应。但是从我的 s-s-r 项目发出请求，我没有收到响应。

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

谢谢

【参考方案1】：

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

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

this._vm.$api.post('/api/s-s-r-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);
)

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

【讨论】：

谢谢您或您的回复。但这不是不记名令牌，而是 CSRF/XSRF 令牌，需要作为 X-XSRF-TOKEN 附加到请求中。此外，正如我指出的那样，使用 Postman 附加令牌可以正确给出响应。但是从 Axios 附加它会出错。使用您回复中的方法，错误仍然存​​在。