Axios 不发送带有标头的 XSRF 令牌

Question

我正在将基于 Vue JS（Quasar 框架）的 SPA 与 API 集成。该 API 是在 Laravel 中构建的，并使用 CSRF 的 sainttum。

当我向 sainttum 端点发送请求时

https://someweburl.com/sanctum/csrf-cookie

它正确地将 XSRF-TOKEN 作为 cookie 发送。但是当我发送 POST 请求时，X-XSRF-TOKEN 没有将其自身附加到标头中。我收到“令牌不匹配”错误。

前端位于我的 localhost:8080 上，而 API 位于 url 上。我无法直接访问 Laravel 项目，只能访问 API。

以下是我的axios配置

import Vue from 'vue';
import axios from 'axios';

Vue.prototype.$axios = axios;

const apiBaseUrl = "https://someweburl.com";
const api = axios.create({ baseURL: apiBaseUrl });

api.defaults.withCredentials = true;

Vue.prototype.$api = api;
Vue.prototype.$apiBaseURL = apiBaseUrl;


export { axios, api, apiBaseUrl }

以下是我试图实现的请求格式，即获取 CSRF 后的 POST 请求

export const fetchAllEvents = async function (context, payload) {
    this._vm.$api.get('/sanctum/csrf-cookie').then(response => {
        this._vm.$api.post('/api/website/event/all').then(response => {
            context.commit('setAllEvents', response.data.data);
        }).catch(error => {
            console.log(error);
        })
    }).catch(error => {
        console.log(error);
    })
}

当我检查使用 Postman 发出 POST 请求并添加 X-XSRF-TOKEN 作为标头时，我得到了正确的响应。这意味着 API 工作正常。但是 axios 有一些问题。

任何帮助将不胜感激。

Answer 1

也许这是因为 Axios 仅在前端和后端具有确切原点时才设置

X-XSRF-TOKEN

标头。您提到您正在本地主机上尝试使用前端应用程序，并且 API 位于网络上的另一个 URL 上。

有关更多信息，请参阅 axios GitHub 存储库：https://github.com/axios/axios/blob/cd8989a987f994c79148bb0cacfca3379ca27414/lib/adapters/xhr.js#L179

Answer 2

检查响应头中的cookie路径与前端路径是否相同。我有“XSRF-TOKEN”，其中有路径“/iotconsoleapi-co”，但我的前端网址不包含这样的路径。它给出了错误。所以我将 cookie 路径更改为“/”，它的效果非常好。如果您使用 Spring-boot，可能会出现此问题，因为它会自动设置子域路径。

Answer 3

如果有人仍然遇到问题，我通过将此行添加到 axios 默认值来修复它

axios.defaults.withXSRFToken = true