Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

grunburg's avatar

Nuxt 3 fetch doesn't work but Axios does

Hello, I'm having trouble with authentication using Nuxt's useFetch returning 419 error – "CSRF token mismatch."

Error

At the same trying the authentication with Axios, everything is successful.

Axios code:

const request = axios.create({
    baseURL: 'http://localhost:8000',
    withCredentials: true,
})

const login = async ({ ...props }) => {
    await request.get('/sanctum/csrf-cookie')
    await request.post('/login', props)

    request.get('/api/user')
        .then(({ data }) => user.setUser(data))
        .catch(error => { console.log(error) })
}

Fetch code: Basically, the same code but Axios is replaced by a custom fetch wrapper.

	// useRquest.js				
   export const useRequest = () => { ...

    const get = async (url: string) => {
        return await useFetch(url, {
            method: 'get',
            baseURL: config.url,
            mode: 'cors',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json',
            },
            credentials: 'include',
        })
    }

    const post = async (url: string, body: object) => {
        return await useFetch(url, {
            method: 'post',
            baseURL: config.url,
            mode: 'cors',
            body: JSON.stringify(body),
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json',
            },
            credentials: 'include',
        })
    }

What exactly might be wrong here with fetch options?

0 likes
1 reply
grunburg's avatar

The issue looks like POST request doesn't include the CSRF cookie, only session cookie. As opposed, Axios sends both within one request. The question is, how can I implement multiple cookies per request using fetch?

Please or to participate in this conversation.