无法验证CSRF令牌真实性Rails / React

Question

我在rails应用程序中有一个react组件，我正在尝试使用fetch()将POST发送到我在localhost上托管的rails应用程序，这给了我错误：

ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):

我正在使用设计宝石来处理user/registrations和logins。

我试图删除protect_from_forgery with: :exception

这是我的提取代码，

this.state.ids.sub_id});
  fetch(POST_PATH, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: body  
  }).then(res => res.json()).then(console.log);

如何获取csrf令牌并通过表单发送它以便它通过？ 理想情况下，我想通过标题发送它，但我不知道如何访问令牌。

Answer 1

如果您只是在Rails视图中嵌入react组件，最简单的方法是从rails视图中检索csrf标记，然后将其作为fetch api调用中的标头传递。

您可以通过执行以下操作来获取csrf令牌：

const csrf = document.querySelector("meta[name='csrf-token']").getAttribute("content");

然后你只需将它作为你的fetch调用中的标题传递：

...
headers: {
   'Content-Type': 'application/json',
   'X-CSRF-Token': csrf
 },
...

我通常不使用fetch，所以不太确定确切的语法，但这应该有助于指导你。

Answer 2

谢谢！我最终得到了这个作为一个有效的解决方案：在渲染我的反应组件的视图中

<% csrf_token = form_authenticity_token %>

<%= react_component('ExerciseDisplay', {
  program: @program.subprograms.first.exercises, ids: {sub_id: @program.subprograms.first.id, team_id: @team.id, token: csrf_token}
}) %>

我将令牌传递到状态，然后通过fetch访问它：

  fetch(POST_PATH, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': this.state.ids.token
      },
      body: body  
}).then(res => res.json()).then(console.log);

Answer 3

使用rails 5.2时我也遇到了同样的问题，我可以通过添加来解决这个问题

在application_controller.rb protect_from_forgery with: :null_session中的i got this from here,please refer this