React JS-Laravel 5:在POST方法中使用CSRF令牌 | 在POST方法中使用CSRF令牌

本文介绍了React JS-Laravel 5:在POST方法中使用CSRF令牌的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经阅读了有关Laravel CSRF的一些问题，但是我仍然没有找到如何在React中使用它的问题.我的目标是制作一个POST表单，在其中进行AJAX调用.

I've read some questions about Laravel's CSRF, but I still haven't found how to use it with React.My goal is to make a POST form, where I make an AJAX call.

这是我的 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')未被发送，因为令牌没有被发送.t产生.但是，我看不到如何在React上生成它.

The problem, I assume, is that $('meta[name="csrf-token"]').attr('content') is not being sent, because the token isn't generated. However, I don't see how I can generate it on React.

有人有主意吗?

推荐答案

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

You can also exclude some routes from csrf protection, meaning you don't need the token when posting to those routes, but you also risk cross site forgery posts on those routes.

要排除，请打开 app \ Http \ Middleware \ VerifyCsrfToken.php ，您将看到一个$ except数组.只需将要排除的路由添加到该数组中即可:

To exclude, open app\Http\Middleware\VerifyCsrfToken.php and you will see an $except array. Just add the route you wish to exclude to that array:

protected $except = [
  '/uploadtest'
];

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

I used this method when playing around with uploading files to AWS S3 store from a React Component, which avoided me needing to write a new blade template for the upload - I just put the form in the React Component, and added my POST route to the except array.

在没有csrf的情况下，它可以正常工作"，我通过在刀片模板中放置一个全局var定义来添加它:

Once I got it "working" without csrf, I added it in by putting a global var definition in my blade template:

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

，然后通过全局变量包含在表单中-可以正常工作！即使它应该"是一个道具，而不是一个全局变量:

and then included in in the form via the global variable - this worked! even though it 'should' be a prop, not a global variable:

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

更好"的方法是将令牌作为道具传递:

the 'better' way would be to pass the token in as a prop:

<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令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！