Thursday, April 13, 2017

React Fetch to Laravel API Creates New Session

My app is using React on the front end and Laravel 5.4 on the backend. I'm using fetch() to request data from the backend. The problem is that two sessions are created when the page loads. A TokenMismatchException is thrown by the CSRF Middleware when a POST request is made because the token that is sent matches the first session that is created, but it checks against the second.

I'm setting the token in app.blade.php

<meta name="_token" content="">

And grabbing the token in the fetch config

fetchConfig = {
    headers:  {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
    },
    credentials: 'same-origin'
}}

Here are the decrypted sessions:

a:3:{s:6:"_token";s:40:"7obvOzPaqqJDtVdij8RaqrvmTFLjKA2qnvYMxry6";s:9:"_previous";a:1:{s:3:"url";s:24:"http://localhost/page";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}

a:3:{s:6:"_token";s:40:"5Aiws9Qy72YzlkfWX81zkhzrSeiMDYjFWiLeDAwN";s:9:"_previous";a:1:{s:3:"url";s:41:"http://localhost/api/page";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}

How can I prevent a new session from being created when the React app makes its initial GET request?



via bill

Advertisement