在现代 Web 开发中，使用 AJAX 技术进行异步请求已经成为一个非常普遍的做法。然而，当你需要向服务端发送请求时，为了防止 CSRF（跨站请求伪造）攻击，通常需要在请求头中添加 Authenticity Token。
那么，什么是 Authenticity Token 呢？Authenticity Token 是一种随机生成的字符串，用于验证客户端和服务端之间的请求是否合法。服务端会在页面渲染时将 Authenticity Token 放入表单中，而客户端在发送请求时需要将该 Token 一同发送至服务端。
在前端如何发送 Authenticity Token
在前端，我们可以通过以下两种方式来发送 Authenticity Token：
1. 在请求头中添加 X-CSRF-Token 字段
在发送 AJAX 请求时，我们可以手动将 Authenticity Token 添加到请求头中的 X-CSRF-Token 字段中，示例代码如下：
-- -------------------- ---- -------
--------
---- -----------
----- -------
-------- -
--------------- ---------------------------------------------
--
----- -
-- ---- ---- ----
--
-------- ------------------ -
-- ---- ------- ---- ----
--
------ ------------- ------- ------ -
-- ---- ----- -------- ---- ----
-
---在上面的代码中，我们使用 jQuery 的 $.ajax() 方法发送了一条 POST 请求，并在请求头中添加了 X-CSRF-Token 字段。注意，我们使用了 $('meta[name="csrf-token"]').attr('content') 来获取 Authenticity Token 的值，这是因为在 Rails 中，Authenticity Token 默认会以 meta 标签的形式放置在页面中。
2. 使用 jQuery 的 AJAX 预过滤器
另一种方式是使用 jQuery 的 AJAX 预过滤器，在每个 AJAX 请求发送前自动将 Authenticity Token 添加到请求头中。示例代码如下：
$(document).ajaxSend(function(event, xhr, settings) {
if (settings.type === 'post' || settings.type === 'put' || settings.type === 'delete') {
// Only send the token to relative URLs i.e. locally.
if (!/^(https?:)?\/\//i.test(settings.url)) {
xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
}
}
});在上面的代码中，我们使用 $(document).ajaxSend() 方法来定义一个 AJAX 预过滤器，并在其中判断当前请求是否需要添加 Authenticity Token。需要注意的是，我们只向本地 URL 发送 Authenticity Token，这是为了避免误将 Token 发送至第三方网站。
总结
在使用 AJAX 进行异步请求时，正确发送 Authenticity Token 是非常重要的。通过本文，我们介绍了两种在前端发送 Authenticity Token 的方法，并提供了示例代码。如果你正在进行 Web 开发，务必要学习和掌握这些技巧，以确保你的应用程序能够安全地运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27248