CSRF token mismatch in laravel 9 + vue js2 on production but working fine on local system

Question

I am working on Laravel 9 + Vuejs 2 (Jetstream). The application is working fine on the local system with php artisan serve and I am able to login into the application and also able to perform other CRUD operations. and it's also working fine on the staging server which I set up around 1 year ago.

Now I am trying to deploy the application on the production server but it's giving me a

CSRF token mismatch

error on the login page. even the login page is the default login page generated by the jetstream

data() {
    return {
        form: this.$inertia.form({
            email: "",
            password: "",
            remember: false,
        }),
        lang: "",
    };
},

props: ["login"],

methods: {
    submit() {
        if (this.form.email != "" && this.form.password != "") {
            this.form
                .transform((data) => ({
                    ...data,
                    remember: this.form.remember ? "on" : "",
                }))
                .post(this.route("login"), {
                    onFinish: () => this.form.reset("password"),
                });
        }
    },
},

I have also noticed that the application is working fine with

php artisan serve

when when I try to setup a virtual host on my same local system from the same project then again it's giving me the

CSRF token mismatch

error. which is very strange to me as I have deployed multiple other projects with the same tech stack and it's all working fine there on the live server

please help me to fix this issue

thanks

Answer 1

I found the issue, Actually, my app was in production mode and there was no SSL on the production URL so the secure cookie was unable to generate. after installing the SSL on the production server everything starts working.