Constant 419 errors on Axios and Laravel 11 on Azure Web App

I have been on this problem for exactly a week now and I'm about to give up.

I'm running a Laravel 11 API at an api. subdomain, a production frontend at a builder. subdomain and a development frontend at localhost:5173. I have set up the API to authenticate via either API token (for the development frontend) or SPA (for the production frontend).

No matter what I do, the development frontend won't authenticate at all (throws an immediate 419), the production one WILL authenticate but will then throw a 419 on refresh.

I eventually found that Axios (1.7.7) was not sending the X-XSRF-TOKEN back in the headers on requests. It seems to have changed around version 1.6 so I added some logic to add this manually. That then meant the production frontend authenticated properly and logged in. However, a subsequent refresh would again result in a 419 and log me out. The development frontend still didn't log in at all. The frontend is sending POST requests like this which seems to be as per documentation:

			await api.get('/api/csrf-cookie').then( async () => {
							const response = await api.post('/api/user/login', { email, password });
							this.user = response.data.user;  // Set the user state after login
			});

The cookies being returned are Secure and SameSite None. SANCTUM_STATEFUL_DOMAINS is set correctly.

The Vue front end is hosted on an Azure Static App and the API is hosted on an Azure Web App with Github CI/CD.

I'm not sure what else to try. It seems like Laravel is unable to persist the session (stored in database) but it is clearly logging the sessions there. I do note the user ID disappears (to null) when the 419 is returned but I can't find any reason why this would happen as the X-XSRF-TOKEN being sent with the request is identical to the XSRF-TOKEN send by the csrf-token request immediately before.