Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am integrating a Vue JS (Quasar framework) based SPA with API. The API is built in Laravel and is using sanctum for CSRF.

When I send a request to the sanctum endpoint https://someweburl.com/sanctum/csrf-cookie it sends the XSRF-TOKEN as cookie correctly. But when I am sending the the POST request, the X-XSRF-TOKEN is not attaching itself with the header. And I am getting a 'token mismatch' error.

The front-end is on my localhost:8080 while the API is live on a url. I do not have direct access to the Laravel project but only the API.

Following is my axios configuration

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 }
Following is the request format that I am trying to achieve i.e A POST request after getting the CSRF
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);
When I check use Postman to make the POST request with X-XSRF-TOKEN added as header, i am getting the correct response. Which means the API is working correctly. But there's some issue with axios.
Any help will be appreciated.
                Set axios.defaults.withCredentials = true prior to axios.create and not on the instance default
– Ohgodwhy
                Aug 31, 2021 at 18:08
                Setting axios.defaults.withCredentials = true prior to axios.create didn't work. When I console.log the $api it shows the withCredentials set to true there. But the X-XSRF-TOKEN header is still not going the the requests.
– Ahmed Raza
                Sep 4, 2021 at 7:53
Maybe that is because the Axios only sets the X-XSRF-TOKEN header when the front and backend have the exact origin. You mentioned you are trying with your frontend app at your localhost and the API is on the web at another URL.
See the axios GitHub repository for more information: https://github.com/axios/axios/blob/cd8989a987f994c79148bb0cacfca3379ca27414/lib/adapters/xhr.js#L179
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.