React js - Laravel 5: Using csrf-token in POST method

Question

I've read some questions about Laravel's CSRF, but I still haven't found how to use it with React. My goal is to make a POST form, where I make an AJAX call.

Here is an extract of my render( ).

render() {
return (
  <form method="post" action="logpage">
   <input type="hidden" name="csrf-token" value="{{{ csrf_token() }}}" />
   //I'm sure this doesn't have csrf_token.

   <input type="text" name ="word" value={this.state.word || ''}/>
   <button onClick={this.submit} className="btn btn-flat btn-brand waves-attach waves-effect" data-dismiss="modal" type="button">Save</button>
  </form>
  );
}

Here is the submit function.

submit(){
fetch('/words', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  body: JSON.stringify({
    //parameters
  })
}).then((response)=>{
  console.log(response);
});
}

The problem, I assume, is that $('meta[name="csrf-token"]').attr('content') is not being sent, because the token isn't generated. However, I don't see how I can generate it on React.

Does anyone have an idea?

EddyTheDove · Accepted Answer · 2017-01-31 23:09:16Z

6

You can echo the token in Javascript like this:

<script> 
    var csrf_token = '<?php echo csrf_token(); ?>'; 
</script>

And access it from anywhere in Javascript

'X-CSRF-TOKEN': csrf_token

I hope this works for you.

answered Jan 31, 2017 at 23:09

EddyTheDove

13.2k2 gold badges40 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NULL pointer · Accepted Answer · 2018-11-21 02:12:34Z

You can also exclude some routes from csrf protection, meaning you don't need the token when posting to those routes, but you also risk cross site forgery posts on those routes.

To exclude, open app\Http\Middleware\VerifyCsrfToken.php and you will see an $except array. Just add the route you wish to exclude to that array:

protected $except = [
  '/uploadtest'
];

I used this method when playing around with uploading files to AWS S3 store from a React Component, which avoided me needing to write a new blade template for the upload - I just put the form in the React Component, and added my POST route to the except array.

Once I got it "working" without csrf, I added it in by putting a global var definition in my blade template:

<head>
...
...
<script>
...
var csrf_token = '{{ echo csrf_token()}}';
...
</script>
</head>

and then included in in the form via the global variable - this worked! even though it 'should' be a prop, not a global variable:

<form action="/uploadtest" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="_token" value={csrf_token} />
  <input type="file" name="filename" />
  <input type="submit" value="Upload"/>
</form>

the 'better' way would be to pass the token in as a prop:

<form action="/uploadtest" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="_token" value={this.props.csrf_token} />
  <input type="file" name="filename" />
  <input type="submit" value="Upload"/>
</form>

Collectives™ on Stack Overflow

React js - Laravel 5: Using csrf-token in POST method

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related