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**



  addTask:function()
  {
    this.displayError = false;
    if($('.inputs').length > 0)
    {
      const config ={
        onUploadProgress:function(progressEvent)
        {
          var percentCompleted  = Math.round((progressEvent.loaded * 100)/progressEvent.total);
          console.log(percentCompleted)
        }
      }
      var form = new FormData();
      form.append("title",this.title);
      form.append("description",this.txtdesc);
      form.append("status_id",this.status_id);
      form.append("user_id",this.user_id);
      
        axios.post("http://127.0.0.1:8020/tasks",form,config).then((res)=>{
          console.log(res)
        })
    }else
    {
      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