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?
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.
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>