CSRF token mismatch From separate vue project to laravel controller

  laravel, vue.js

I have two projects running

One is front end

Other is backend

Frontend project is made in vue js and backend is made in laravel

I am trying to do a post request via axios but i get csrf token mismatch
I cant use the meta tag solution as they both are different projects

                             **Route i want to hit**

Route::group(['middleware' => 'auth'], function () {
    Route::post('tasks', '[email protected]')->name('tasks.store');

                      **my axios call in my vue js project**

    this.displayError = false;
    if($('.inputs').length > 0)
      const config ={
          var percentCompleted  = Math.round((progressEvent.loaded * 100)/progressEvent.total);
      var form = new FormData();
      this.displayError = true;

When i fire this function to send data to controller it gives csrf token mismatch error
If it was a laravel project i could’ve ha tried

  1. adding {{csrf_field()}}

  2. adding @csrf

  3. adding csrf in meta

but how to do it in vue js

PS I have tried removing auth middleware but it returned the same error and

it will work if i place the route inside the cerifycsrftoken file in backend project
but i want to do it with csrf token

Source: Laravel

Leave a Reply