React js - Laravel 5：在 POST 方法中使用 csrf-token答案

【问题标题】：React js - Laravel 5: Using csrf-token in POST methodReact js - Laravel 5：在 POST 方法中使用 csrf-token
【发布时间】：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 上生成它。

有人有想法吗？

【问题讨论】：

标签： javascript laravel reactjs

【解决方案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>

【讨论】：