CSRF token mismatch From separate vue project to laravel controller

Question

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', 'TaskController@store')->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

adding {{csrf_field()}}
adding @csrf
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

Does this answer your question? [Laravel + Vue.js (axios) - CSRF token mismatch](https://stackoverflow.com/questions/59448621/laravel-vue-js-axios-csrf-token-mismatch) — Rikesh, Sep 15 '21 at 05:16
No i have mentioned earlier these two are separate projects and i am using backend project as a rest api — Mohammad Fahad, Sep 15 '21 at 05:17
Have you tried serving up the index.html shell page from the backend project so you can add the csrf token? Then you would just link to your front end project's js script in the index.html. — bassxzero, Sep 15 '21 at 05:27
wouldn't that be more of a manual thing lets say i only offer that backend and random people try to access it how i will manage to place their projects link in my project and ultimately that isn't my goal — Mohammad Fahad, Sep 15 '21 at 06:04

Mohammad Fahad · Answer 1 · 2021-09-15T08:05:52.203

0

I placed my routes from web.php to api.php and added the prefix api which solved my csrf token mismatch problem

also if i place route url in verifyCsrfToken.php file it solves the issue without moving routes to api.php

I took route

Route::post('tasks', 'TaskController@store')->name('tasks.store');

from the web .php file and then i placed it in api.php file

Route::post('tasks', 'TaskController@store')->name('tasks.store');

also i didnt used auth middleware on them

edited Sep 15 '21 at 08:05

answered Sep 15 '21 at 06:26

Mohammad Fahad

81
1
12

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 15 '21 at 06:34

CSRF token mismatch From separate vue project to laravel controller

1 Answers1