Just an update, I was finally able to get it working using my custom domain.
My knowledge of DNS is quite limited so I could be wrong but it appears that the cookie issues I was having were caused by the .fly.dev domain, maybe some limitations in being able set cookies for the domain.
So to summarise. I have two apps (separate codebases); a Laravel API and a VueJS front end.
The issue: the Laravel CSRF endpoint was unable to set the cookie when requested by the front end. This led to all subsequent requests from the front end to the back end failing due to the absence of the CSRF cookie.
I resolved this using a custom domain for both apps. In order to do this I had to allocate an IPv4 address for each app. I then used these IP addresses to configure subdomains for my apps (added them as CNAME records).
I followed the simple example here Dockerize Vue.js App — Vue.js to Dockerize my front end Vue app. I tried to do it using Nginx but I couldn’t get the configuration correct. In order fix the redirect issue (redirects return 404), you’ll need to change the following line:
CMD [ "http-server", "dist" ]
so that you pass in a proxy option (this implements a catchall redirect):
CMD [ "http-server", "dist" , "-P", "https://your-app-url.com?" ]
Note the question mark at the end
I hope this is useful for anyone trying to set up Laravel and Vue apps.