He leído algunas preguntas sobre el CSRF de Laravel, pero todavía no he encontrado cómo usarlo con React. Mi objetivo es hacer un formulario POST, donde hago una llamada AJAX.
Aquí hay un extracto de mi 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> ); }Aquí está la función de envío.
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); }); } Supongo que el problema es que $('meta[name="csrf-token"]').attr('content') no se envía, porque no se genera el token. Sin embargo, no veo cómo puedo generarlo en React.
¿Alguien tiene alguna idea?
Puede hacer eco del token en Javascript de esta manera:
<script> var csrf_token = '<?php echo csrf_token(); ?>'; </script>Y acceda a él desde cualquier lugar en Javascript
'X-CSRF-TOKEN': csrf_tokenEspero que esto funcione para usted.
También puede excluir algunas rutas de la protección csrf, lo que significa que no necesita el token al publicar en esas rutas, pero también corre el riesgo de publicaciones falsificadas entre sitios en esas rutas.
Para excluir, abra app\Http\Middleware\VerifyCsrfToken.php y verá una matriz $except. Simplemente agregue la ruta que desea excluir a esa matriz:
protected $except = [ '/uploadtest' ];Utilicé este método cuando jugué con la carga de archivos en la tienda AWS S3 desde un componente React, lo que me evitó tener que escribir una nueva plantilla de hoja para la carga: simplemente puse el formulario en el componente React y agregué mi ruta POST al excepto matriz.
Una vez que lo hice "funcionar" sin csrf, lo agregué poniendo una definición de var global en mi plantilla de hoja:
<head> ... ... <script> ... var csrf_token = '{{ echo csrf_token()}}'; ... </script> </head>y luego incluido en el formulario a través de la variable global - ¡esto funcionó! aunque 'debería' ser un accesorio, no una variable global:
<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>la forma 'mejor' sería pasar el token como accesorio:
<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>