Rails与单页应用（React/Angular/Ember）的CSRF保护问题求助

兄弟，我太懂这种被CSRF验证搞懵的感觉了！尤其是Rails自带的安全机制，有时候摸不清它的脾气。先给你捋清楚你现在的情况，以及该怎么解决：

首先，你在ApplicationController里写的这段代码是完全正确的：

class ApplicationController < ActionController::Base
  after_action :set_csrf_cookie

  protected

  def set_csrf_cookie
    cookies["X-CSRF-Token"] = form_authenticity_token
  end
end

它的作用是在每个请求响应后，把最新的CSRF Token存入名为X-CSRF-Token的Cookie里——这一步没问题，但光有Cookie还不够，你的AJAX请求必须主动把这个Token带到请求头里，Rails才会认可这个请求。

接下来分两种常见场景给你说前端该怎么处理：

场景1：用原生JavaScript发送请求 #

你需要手动从Cookie里提取Token，然后添加到请求的X-CSRF-Token头中。可以写个小工具函数来取Cookie：

// 从Cookie中获取指定名称的值
function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.startsWith(`${name}=`)) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

// 获取CSRF Token并发送POST请求
const csrfToken = getCookie('X-CSRF-Token');

fetch('/your_target_path', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 根据你的数据格式调整，比如form-data就换对应头
    'X-CSRF-Token': csrfToken
  },
  body: JSON.stringify({ key: 'value' }) // 你的请求数据
})
.then(res => res.json())
.then(data => console.log('请求成功:', data))
.catch(err => console.error('请求失败:', err));

场景2：用jQuery或者Rails内置的rails-ujs #

如果你用的是jQuery，或者项目里已经引入了rails-ujs（Rails 5默认自带，Rails 4是jquery_ujs），那事情会简单很多：

1. 确保你的页面头部已经添加了CSRF Meta标签（Rails默认的布局里应该已经有了，但最好检查一下）：

<%= csrf_meta_tags %>

这个标签会生成一个<meta name="csrf-token" content="你的Token值">的元素。

2. 不管是用$.ajax()还是原生的fetch，rails-ujs会自动读取这个Meta标签的值，或者从Cookie里取，自动添加到AJAX请求的X-CSRF-Token头里——你甚至不用手动处理！

几个容易踩的坑 #

• 别忘记检查Rails服务器的日志：如果请求被拒绝，日志里会明确提示Can't verify CSRF token authenticity，这时候就能确认是Token没带对的问题。
• 如果你是在Rails 4里测试，要确保jquery_ujs已经在application.js里引入了：//= require jquery_ujs。
• 不要尝试关闭CSRF验证（比如加skip_before_action :verify_authenticity_token），除非你完全清楚后果——这会让你的应用暴露在CSRF攻击下。

内容的提问来源于stack exchange，提问作者user4412054