I kept strugling getting a NextJS Frontend and a Laravel Api working in production. On a local machine it works but online — with real domains an subdomains - I got errors.
Unhandled Runtime Error
Error: Request failed with status code 419Call Stack
createError
node_modules/axios/lib/core/createError.js (16:0)
settle
node_modules/axios/lib/core/settle.js (17:0)
XMLHttpRequest.onloadend
node_modules/axios/lib/adapters/xhr.js (54:0)
But finally I got it working, so for future reference I post my config in this blog.
My setup
The Laravel api was setup with the help of the Breeze-next repo on Github. My working setup is working with;
- Laravel 9.17.0 (using domain.com)
- NextJS 12.1.6 (using api.domain.com)
- Breeze/next 0.1.0
After the instructions at breeze-next I tweaked the following setup.
Laravel api
The api was served at an Ubuntu 20.04 VPS with Apache2.
/etc/apache2/apache2.conf
I added the following line at the bottom;
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1/etc/apache2/sites-available/domain.conf
/etc/apache2/sites-available/domain-api-le-ssl.conf
Laravel .env
config/sanctum.php
config/cors.php
kernel.php
Nextjs Frontend
This one was hosted at vercel.com. The default settings where used. I only added this environment variable;
NEXT_PUBLIC_BACKEND_URL=https://api.domain.com
Still not working?
Even still I eventually ran into an “CSRF token mismatch error”. I solved that by doing the following;
- In your .env file
SESSION_DOMAIN=.example.com - Store sessions in the database
php artisan session:table && composer dump-autoload && php artisan migrate && php artisan config:cache - clear browsercache and cookies
