如何在表单的AJAX发布请求中传递CSRF令牌？

如何在表单的AJAX发布请求中传递CSRF令牌？

好的，经过几个小时的努力，并尝试解密Play上经常出现的主题上下文文档不足的问题，我明白了。

因此，从他们的文档中：

为了对非浏览器请求提供简单保护，“播放”仅检查标头中包含cookie的请求。如果使用AJAX发出请求，则可以将CSRF令牌放在HTML页面中，然后使用

Csrf-Token

标题将其添加到请求中。

然后没有代码或示例。谢谢玩。非常具有描述性。无论如何，这是如何：

在你的

view.html.formTemplate

，你可能会在的IntelliJ写：

@()<form method="post" id="myForm" action="someURL">@helper.CSRF.formField  <!-- This auto-generates a token for you -->  <input type="text" id="sometext">  <button type="submit"> Submit! </button></form>

当交付给客户端时，它将呈现如下所示：

<form method="post" id="myForm" action="someURL"><input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden">  <input type="text" id="sometext">  <button type="submit"> Submit! </button></form>

好的，几乎到了，现在我们必须创建AJAX调用。我的所有文件都放在一个单独的main.js文件中，但如果需要，也可以将其放在您的文件中

view.html.formTemplate

。

$(document).on('submit', '#myForm', function (event) { event.preventDefault();   var data = {    myTextToPass: $('#sometext').val()   } // LOOK AT ME! BETWEEN HERE AND var token =  $('input[name="csrfToken"]').attr('value')    $.ajaxSetup({        beforeSend: function(xhr) { xhr.setRequestHeader('Csrf-Token', token);        }    });// HERE var route = jsRoutes.controllers.DashboardController.postNewProject() $.ajax({    url: route.url,    type: route.type,    data: JSON.stringify(data),    contentType : 'application/json',    success: function (data) { ...      },    error: function (data) { ...  }        })});

这行代码：

var token = $('input[name="csrfToken"]').attr('value')

您将提取在表单字段中自动生成的CSRF令牌，并在要在Javascript中使用的var中获取其值。

所有AJAX的另一个重要块在这里：

$.ajaxSetup({ beforeSend: function(xhr) {     xhr.setRequestHeader('Csrf-Token', token); }        });

使用

$.ajaxSetup

，您可以设置标题中的内容。这是您从他们的文档中得出的结论：

使用Csrf-Token标头将其添加到请求中。

祝好运！让我知道是否清楚。

---

注意 ：使用lusca时，请使用

X-CSRF-Token

代替

Csrf-Token

。