即使设置了meta中的csrf_token,Laravel + ReactJS页面也已过期

I'm building a web application using Laravel 5.6 and ReactJS 16.4.1.

I have set the csrf_token on my master.blade.php on the <head> as follows:

<meta name="csrf-token" content="{{csrf_token()}}">

Then on my reactJs, I loaded my registration component like so:

export default class RegistrationForm extends Component {
    render() {
        return (
            <React.Fragment>
                <form method="post" action={this.props.actionUrl}>
                    <div className="form-group">
                      <label htmlFor="txtEmail">Email</label>
                      <input type="email" name="txtEmail" id="txtEmail" className="form-control" placeholder="Email" />
                    </div>
                    <div className="form-group">
                      <label htmlFor="exampleInputPassword1">Password</label>
                      <input type="password" name="txtPassword" id="txtPassword" className="form-control" placeholder="Password" />
                    </div>
                    <div className="text-right">
                        <button type="submit" name="btnRegister" id="btnRegister" className="btn btn-primary">Register</button>
                    </div>
                </form>
            </React.Fragment>
        );
    }
}

Then when I hit the register button, I am being redirected to a The page has expired due to inactivity. Please refresh and try again. page.

I'm not sure why this is still happening even I have the csrf-token meta already.

I have tried this already but still does not work.

But when I remove the VerifyCsrfToken on the Kernel.php, it works. \App\Http\Modules\Common\Middleware\VerifyCsrfToken::class

Is it safe to remove this class? Though I still want to have the csrf validation as to why I do not want to just remove it on the middleware.

douqie1816
douqie1816 是的,我能够通过手动添加带有{{csrf_token()}}值的隐藏字段来验证这一点,现在它可以正常工作。看起来这个字段应该添加到除meta之外的每个表单上。将此标记为已解决。
大约 2 年之前 回复
dri98076
dri98076 Meta就是这样你可以在任何地方访问它。我认为laravel会在您使用vue时自动将其添加到请求中,但在使用react时则不会
大约 2 年之前 回复
duan1443
duan1443 据我所知,如果您在<meta>上添加了{{csrf_token()}},则无需在表单上添加{{csrf_field()}}。或者我还需要吗?
大约 2 年之前 回复
douren0558
douren0558 请说明如何将csrf_token添加到表单中
大约 2 年之前 回复

1个回答



我手动添加了一个隐藏字段,其中包含 {{csrf_token()}} </ code>作为值 它现在有效。 似乎在reactjs上,除了meta csrf标记外,还应手动添加此字段。</ p>
</ div>

展开原文

原文

I've manually added a hidden field with the {{csrf_token()}} as the value and it now works. It seems that on reactjs, this field should be added manually aside from the meta csrf token.

doumeng9188
doumeng9188 我有一个元标记,然后在每个表单上设置csrf,我有一个隐藏的输入。 然后,react获取元标记的值,然后在隐藏的csrf输入上设置值。
接近 2 年之前 回复
dtsc1684
dtsc1684 你是如何将csrf_token添加到react组件的? 通过刀片模板中设置的全局javascript变量head var csrfToken ='{{csrf_token}}'?
接近 2 年之前 回复
doulou9927
doulou9927 是的..我创建了一个reactjs组件,它创建一个隐藏字段,获取meta csrf值并将其放在隐藏的字段组件上。 只需在每个表单上添加组件,如下所示:<CsrfField />
大约 2 年之前 回复
dougou8458
dougou8458 是的,它应该在表格中添加。 但是,不是每次通过laravel将其添加到表单中,您只需从反应中访问元数据并将其添加到表单中。
大约 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问