React js - Laravel 5：在 POST 方法中使用 csrf-token
Posted
技术标签:
【中文标题】React js - Laravel 5：在 POST 方法中使用 csrf-token【英文标题】：React js - Laravel 5: Using csrf-token in POST method 【发布时间】：2017-06-17 13:05:57 【问题描述】：我已经阅读了一些关于 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 上生成它。
有人有想法吗？
【问题讨论】：
【参考方案1】：您可以像这样在 javascript 中回显令牌：
<script>
var csrf_token = '<?php echo csrf_token(); ?>';
</script>
并从 Javascript 中的任何位置访问它
'X-CSRF-TOKEN': csrf_token
我希望这对你有用。
【讨论】：
【参考方案2】：您还可以从 csrf 保护中排除某些路由，这意味着您在发布到这些路由时不需要令牌，但您也面临在这些路由上跨站点伪造帖子的风险。
要排除，打开app\Http\Middleware\VerifyCsrfToken.php，您将看到一个 $except 数组。只需将您希望排除的路线添加到该数组：
protected $except = [
'/uploadtest'
];
我在尝试从 React 组件将文件上传到 AWS 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>
【讨论】：
以上是关于React js - Laravel 5：在 POST 方法中使用 csrf-token的主要内容，如果未能解决你的问题，请参考以下文章
在Laravel React应用中使用Ionicons 5.
用于资源文件 (CSS/JS) 的 Laravel React-router 404
Laravel 8，使用 Tailwind CSS 安装 React.js