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

IT技术 javascript laravel reactjs
2021-05-12 10:51:37

我已经阅读了一些关于 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个回答

您可以像这样在 Javascript 中回显令牌：

<script> 
    var csrf_token = '<?php echo csrf_token(); ?>'; 
</script>

并从 Javascript 中的任何地方访问它

'X-CSRF-TOKEN': csrf_token

我希望这对你有用。

您还可以从 csrf 保护中排除某些路由，这意味着您在发布到这些路由时不需要令牌，但您也有在这些路由上发布跨站点伪造帖子的风险。

要排除，打开app\Http\Middleware\VerifyCsrfToken.php，您将看到一个 $except 数组。只需将您希望排除的路线添加到该数组中：

protected $except = [
  '/uploadtest'
];

我在尝试从 React 组件上传文件到 AWS S3 存储时使用了这种方法，这避免了我需要为上传编写新的刀片模板 - 我只是将表单放在 React 组件中，并将我的 POST 路由添加到除了数组。

一旦我在没有 csrf 的情况下“工作”了它，我通过在我的刀片模板中放置一个全局 var 定义来添加它：

<head>
...
...
<script>
...
var csrf_token = '{{ echo csrf_token()}}';
...
</script>
</head>

然后通过全局变量包含在表单中 - 这有效！即使它“应该”是一个props，而不是一个全局变量：

<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>

“更好”的方法是将令牌作为props传递：

<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>
其它你可能感兴趣的问题
上一篇尝试配置 U​​BL 时，Marlin 2.0 固件温度在 LCD 上跳动 下一篇位于进料管上方的细丝堵塞 - 复印机 6