CSRF token mismatch with Laravel / VueJS

Hello,

I have an web application with separated back and front.

I have set the default axios configuration like this.

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  withCredentials: true
})

The authentication is with Fortify.

It worked well until I remove Vuetify from the project to code the style with TailwindCSS.

Why do I suddenly get this error ?

Thanks for your help.

JussiMannisto

2 years ago

Best Answer

Level 50

If your front and back don't have the same origin, you have to add withXSRFToken: true to the Axios config. The withCredentials option no longer adds an XSRF token header to cross-origin requests.

There was a CVE a few weeks ago about withCredentials inadvertently leaking XSRF tokens. They've since added the withXSRFToken option as a workaround.

1 like

vincent15000

2 years ago

Level 63

@JussiMannisto Oh thank you very much, it works when I add withXSRFToken: true to the axios base configuration.

Please or to participate in this conversation.