我正在将基于Vue JS(Quasar框架)的SPA与API集成。该API是在Laravel中构建的,并且正在使用CSRF的sanctum。
当我向sanctum端点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有一些问题。
如有任何帮助,我们将不胜感激。
2条答案
按热度按时间p5cysglq1#
也许这是因为Axios只在前端和后端具有确切的起源时设置
X-XSRF-TOKEN
头。你提到你正在尝试在本地主机上使用你的前端应用程序,而API在另一个URL上。有关更多信息,请参阅axios GitHub存储库:https://github.com/axios/axios/blob/cd8989a987f994c79148bb0cacfca3379ca27414/lib/adapters/xhr.js#L179
nmpmafwu2#
检查响应头中的cookie路径和前端路径是否相同。我有“XSRF-TOKEN”,路径为“/iotconsoleapi-co”,但我的前端URL不包含这样的路径。它给出了错误。所以我把cookie路径改为“/”,它就像魅力一样工作。如果您使用Spring-boot,则可能会出现此问题,因为它会自动设置子域路径。