React 中的 CSRF 字段 (JSX)答案

【问题标题】：CSRF Field in React (JSX)React 中的 CSRF 字段 (JSX)
【发布时间】：2021-04-30 23:46:04
【问题描述】：

在 Laravel Blade 中，我们通过在表单中输入 @CSRF 来访问 CSRF 字段。我想做的是访问 React JSX 而不是 Blade 中的 CSRF 字段。我在这里找到了答案React js - Laravel 5: Using csrf-token in POST method，但我想知道是否有更好的方法来做到这一点。

如何以最佳方式将 CSRF 字段放入 (React) JSX 中的表单中？

【问题讨论】：

使用 api.php 它要求。令牌而不是请求。 csrf 令牌

标签： javascript php reactjs laravel

【解决方案1】：

您提到的答案是在反应（即javascript）中使用csrf 的首选方式。如果我是对的。

虽然如果您使用的是 axios，那么您可以将令牌全局添加到 axios。

//in your main layout file     
<meta name="csrf-token" content="{{ csrf_token() }}" />

如果对任何请求使用axios（这必须在所有页面的公共脚本文件中）

// I am using jquery, you can do it in vanilla too 
axios.defaults.headers.common['X-CSRF-TOKEN'] = $(
  'meta[name="csrf-token"]'
).attr('content');

对于jsx 中的csrf，如果您的所有页面都有通用 js 文件

添加：let csrfToken = $('meta[name="csrf-token"]').attr('content');

在JSX的表格中，这样使用

<input type="hidden" name="_token" value={csrfToken} />

【讨论】：

我认为，这是最常用的方式，但我退出了，如果有不同的选择。