Level 104
I have included the csrf-token in the post request.
How have you included the token?
1 like
Nov 5, 2018
4
Level 6
React Post Request 419 Error: Sorry, your session has expired. Please refresh and try again.
I'm making post request inside a react.js component and always got the 419 Error: Sorry, your session has expired. Please refresh and try again. I have included the csrf-token in the post request. I tried both the fetch api and axios but got the same result. But if I added the route to the $except[] array in veryfycsrftoken.php, the error is gone. I'm using laravel 5.7.12. Any advice is highly appreciated. Thanks in advance!
Level 6
Hi tykus, thanks for your response.
I included the token like this: fetch(url, { headers: { "Content-Type": "application/json", "Accept": "application/json, text-plain, /", "X-CSRF-TOKEN": t$('meta[name="csrf-token"]').attr('content') }
With Axios, I think the token has been included by default, as mentioned in Laravel document:
By default, the resources/js/bootstrap.js file registers the value of the csrf-token meta tag with the Axios HTTP library. If you are not using this library, you will need to manually configure this behavior for your application.
Level 104
And, you have a meta tag in the <head> of your HTML document that contains the CSRF token??
<meta name="csrf-token" content="{{ csrf_token() }}">
What is that t character between the X-CSRF-TOKEN and the JQuery??
You can get the token with vanilla JS, and then pass it (as you have done to the Fetch API):
let token = document.querySelector(‘meta[name=”csrf-token”]’).getAttribute(‘content’);
fetch(url, {
headers: {
"Content-Type": "application/json",
"Accept": "application/json, text-plain, */*",
"X-Requested-With": "XMLHttpRequest",
"X-CSRF-TOKEN": token
},
// ... the remain of the request body
}
2 likes
Level 6
Hi tykus, thank you for sending the code! I finally figured it out. The CSRF field must be placed inside the form to make it work.
// in the blade view
<meta name="csrf-token" content="{{ csrf_token() }}"> .
// in the react component
handleSubmit(event) {
event.preventDefault();
const {title, body} = this.state;
fetch('/threads', {
method: 'POST',
body: JSON.stringify({
title,
body
})
}).then(response => console.log(response));
}
render() {
let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
return (
<React.Fragment>
<h1 className="display-4 mb-5">{this.props.heading}</h1>
<form method="POST" action={this.props.action}>
<div className="form-group">
<label htmlFor="title">Title:</label>
<input type="text" className="form-control" id="title" name="title" onChange={this.handleChange}></input>
</div>
<input type="hidden" name="_token" value={token}></input>
<div className="form-group">
<label htmlFor="body">Body:</label>
<textarea className="form-control" id="body" name="body" rows="8" onChange={this.handleChange}></textarea>
</div>
<button type="submit" className="btn btn-primary" onSubmit={this.handleSubmit}>Submit</button>
</form>
</React.Fragment>
);
}
Please or to participate in this conversation.