Session has been expired 419

I have a login form inside my app and I want to log in users using an ajax request. Now that part works properly.

But after logging in the user, he should be able to upload a document. There is where I get confused. When I try to upload I get the message Session has been expired, Error 419.

Here is my code snippet for login user:

axios.post('/login', this.$data)
                    .then(response => {
                        if (response.status === 200) {
                            window.events.$emit('userCreated', response.data);
                            this.$emit('userLoggedIn', response.data);
                        }
                    }).catch(error => {
                        this.errors.record(error.response.data.errors);
                    });

After I get 200, I want to use the registered user data to upload a document using Uppy:

const uppy = Uppy(uppy_settings)
                .use(Dashboard, dashboard_settings)
                .use(XHRUpload, {
                    endpoint: this.endpoint,
                    bundle: true,
                    fieldName: 'articles[]',
                    headers: {
                        'X-CSRF-TOKEN': document.getElementById('csrf').getAttribute('content')
                    },
                    getResponseError(responseText, xhr) {
                        return new Error(responseText) ;
                    }
                });

            this.uppy = uppy;

            uppy.on('upload-success', (file, response) => {
                this.$emit('fileUploaded', response.body);
            });
        },

The interesting part is that after refreshing the page I can upload the document without any problem. I think it's about token but I don't know how to fix this problem.

grenadecx

7 years ago

Level 7

That error is usually because of missing token in the ajax request.

Take a look here https://laravel.com/docs/5.8/csrf

Since you use axios, in the default app.js or maybe it's bootstrap.js that comes with laravel, it has this code:

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

As you can see it takes the csrf from the meta tag and appends all ajax calls with axios.

Edit: And if you use that code already, you probably just need the meta tag in your layout file:

<meta name="csrf-token" content="{{ csrf_token() }}">

hamedghaderi

7 years ago

Level 17

But as you can see in uppy, I set the headers to that meta tag content.

grenadecx

7 years ago

Level 7

Are you sure you are getting a match with the selector and it's being sent? In chrome you can inspect the request headers that is being sent in the inspection tool under network.

Like below http://i.imgur.com/AVQoXx7.png

Snapey

7 years ago

Level 122

The problem is that when you login, Laravel will regenerate the session and this will mean your initial csrf token ( the onebound to window) is no longer valid

Either refresh the page or try to get the new token and send it back with your login response

1 like

Please or to participate in this conversation.