React js - Laravel 5:在POST方法中使用csrf-token
我读过一些关于Laravel的CSRF的问题，但我仍然没有找到如何在React中使用它。我的目标是创建一个POST表单，在其中进行AJAX调用。
这是我的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>
);
}这里是提交函数。
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);
});
}我认为问题在于没有发送$('meta[name="csrf-token"]').attr('content')，因为没有生成令牌。但是，我不知道如何在React上生成它。
有谁有主意吗？
回答 2
Stack Overflow用户
发布于 2017-02-01 07:09:16
您可以在Javascript中回显令牌，如下所示：
<script>
var csrf_token = '<?php echo csrf_token(); ?>';
</script>并在Javascript中的任何位置访问它
'X-CSRF-TOKEN': csrf_token我希望这对你有用。
Stack Overflow用户
发布于 2018-11-21 08:52:33
您还可以从csrf保护中排除一些路由，这意味着您在发布到这些路由时不需要令牌，但您也会在这些路由上冒跨站点伪造帖子的风险。
要排除此操作，请打开app\Http\Middleware\VerifyCsrfToken.php，您将看到一个$except阵列。只需将您希望排除的路由添加到该数组中：
protected $except = [
'/uploadtest'
];当我尝试从React组件将文件上传到亚马逊S3商店时，我使用了这种方法，这避免了我需要为上传编写新的刀片模板-我只需将表单放入React组件，并将我的POST路由添加到except数组中。
一旦我在没有csrf的情况下让它“工作”，我通过在我的刀片模板中添加一个全局var定义来添加它：
<head>
...
...
<script>
...
var csrf_token = '{{ echo csrf_token()}}';
...
</script>
</head>然后通过全局变量将其包含在表单中-这是可行的！即使它“应该”是一个道具，而不是全局变量：
<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>“更好”的方法是将令牌作为道具传入：
<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>https://stackoverflow.com/questions/41968696
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号