Laravel 10 /Inertia Error 419 on production

@Danredoros I've never had to manually add this for any of my laravel projects that use Inertia + vue. The inertia middleware automatically handles the CSRF token for you.

Did you make any changes to the session config file?

@gych No I did not change the session config file

@Danredoros Ok, check the developers tool network tab to see if the CSRF token is added to your request.

@gych On the local server it works fine. No problems whatsoever. In production, however, it does not. CSRF token is not added in my request.

@Danredoros Which session driver do you use and is there chance that you also include the csrf token in other places in your project, the app.blade file?

@gych I am using SESSION_DRIVER=file and I did not add the CSRF token in any template.

@Danredoros Check the storage/framework/sessions folder. Are the sessions successfully stored in that folder.?

@gych Yes, the session files are successfully stored in the session folder.

@Danredoros Did you already tried to define the SESSION_DOMAIN in your env file?

SESSION_DOMAIN=yourdomain.com

@gych Yes I did

@Danredoros I assume you already tried to clear your view, routes, cache and config via artisan commands?

Things you could also try:

• Add this on top of your app.blade.php file

ob_start();

• Generate new app key

@gych Still not working

@Danredoros Which hosting environment are you using for poduction?

@gych The application is on an apache nginx server

@gych I just created a simple script to test it.

## Vue component
const form = useForm({
    id: 4,
    title: 'test'
})


function send() {

    form.get('/update')
}

## Laravel controller
    public function update(Request $request) {


        Product::where('id',$request->id)->update(['title'=>$request->title]);

      
        //return redirect()->route('test.update')->with('success','Product updated successfully');

    }

If I comment the redirect with the creation of the session success, it works, otherwise it gives me an error. Very strange.

@Danredoros Can you test if you can manually add a cookie when you visit for example the homepage. If this doesn't work then there's propably an issue that the server can't set any cookies and not only related to the csrf cookie.

You can set this for example in the index method of the controller for your homepage (= route '/')

use Illuminate\Support\Facades\Cookie;

Cookie::queue(cookie('testcookie', 'value', 10));

@gych I tested it. Cookies are generated, but still the same problem.

@Danredoros Ok can test with this code if it shows the tokens in the dump and die when you visit this route

use Illuminate\Http\Request;

Route::get('/token', function (Request $request) {
    dd($request->session()->token(), csrf_token());
});

@gych I tested the route you sent me. Here the result:

"Rn18TvPz324vA9g8PDbJWorTmfUe64PUBHK87rWJ" // routes/frontend.php:62
"Rn18TvPz324vA9g8PDbJWorTmfUe64PUBHK87rWJ" // routes/frontend.php:62

I forgot to mention that every time I click on a button with an event for a GET, POST or PUT request, the error below appears in the console. I did some research and it seems to be a bug in Inertia. Maybe it could be one or the cause of this issue that I only have in production.

app-9807fc31.js:13 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toString')

This error is related to different functions in the node_modules like this:

function ea(t) {
return new URL(t.toString(),window.location.toString())
}

The other related functions obviously have other names.

@Danredoros Have you checked if the XSRF token is actually added to the request headers? If you're using Chrome, do this:

1. Open the developer tools
2. Select the Network tab
3. Submit the form on your page
4. Select the right request from the list of requests
5. Select the Headers tab
6. See if the Request Headers section has a header named x-xsrf-token (or x-csrf-token)

If the token is there, you should see something like this: https://ibb.co/1ZV0YY4

@JussiMannisto Unfortunately, there is no token in the header

@Danredoros Interesting

Can you try to use a path as redirect instead of route name? You might have to change the path if you use a different url for that route than in this example

return redirect("/admin/products/edit/$id");

@gych It doesn't work that way either. It does not make any redirects.

@Danredoros You also get an error or it just does not redirect you?

@gych I didnt get an error...it does not redirect

@Danredoros Well there's your problem.

Try adding this line to your boostrap.js, after the window.axios declaration:

window.axios.defaults.withXSRFToken = true;

@JussiMannisto I am not using bootstrap in app.js..

@Danredoros

For testing purposes try this, redirection should work because I use the same in multple of my intertia+vue apps

return redirect('/admin/products');

@Danredoros Why?

@Danredoros If you want to test this you can also add this on top in your app.js file under the imports. You can add it like this:

import axios from 'axios';
window.axios = axios;
window.axios.defaults.withXSRFToken = true;

@JussiMannisto Because I followed the documentation and it was not necessary to add bootstrap for axios in app.js. On local it works just fine.

@Danredoros It works on local because your front and back ends have the same origin. I assume you're sending cross-origin requests in production. See here how Axios decides if the XSRF token is included.

Some background information might be useful. Axios received a CVE in October regarding the withCredentials option. As a result the behavior of the option was changed so that it no longer automatically adds the XSRF header to cross-origin requests. They later added the withXSRFToken option to mimic the old behavior.

Do note that adding withXSRFToken adds the token to all requests. This is what the CVE was about. So use different Axios settings if you're sending requests to 3rd party APIs and don't want to leak your XSRF token.

@JussiMannisto Thanks for the information. I will do a total code revision and then tomorrow or in two days I will tell you the result.

@gych Thank you very much for your suggestions. I want to recreate everything from scratch with a new laravel instance and examine all the code step by step. In a day or two I will tell you if the problem still persists.

@Danredoros Goodluck I hope this will solve it. You an always try to run a fresh installation with a test route on production first to see if that works. If you found the issue let me know, I'm curious for what's causing this.

@Danredoros Just one more question: does your back end run in a different origin from the front end? Like a different port or subdomain.

@gych I reinstalled a new laravel 10 instance from scratch and reinserted the application code. For the login I use a template blade which takes me back to the admin entirely made with inertia. Everything seems to work correctly in production so far. I don't know what caused all those issues before.

@Danredoros Great I'm glad it works now, it could have been multiple causes but from everything we tried nothing worked. Maybe something went wrong with the initial project setup but not sure.

@JussiMannisto thank you! After the whole day of trying everything this worked for me.

I've added:

window.axios.defaults.withCredentials = true; // without this one it wasn't working in Firefox
window.axios.defaults.withXSRFToken = true;

to the bootstrap.js file. I was getting 419 on Inertia requests only. See: laravel . com/docs/11.x/sanctum#cors-and-cookies

Still don't understand why it was working on other envs but not on the fresh one.

@JussiMannisto You're a lifesaver bro, I spent hours trying to figure this out. I can't believe adding this line worked lol