Rails 4.2中AMP表单提交记录失败问题求助

我帮你梳理下Rails 4.2搭配AMP表单提交时的常见问题，从你给出的请求日志来看，虽然请求已经打到后端，但大概率是CSRF验证或者AMP响应格式不符合要求导致的失败——这俩是坑最多的地方，给你几个针对性的解决方案：

1. 适配AMP的CSRF验证逻辑 #

Rails 4.2默认的CSRF验证会检查请求的Origin头，但AMP表单提交的请求是通过XHR发送的，并且会带上__amp_source_origin参数而非标准的Origin头，这会导致Rails拒绝请求。你需要修改ApplicationController的验证逻辑，让它能识别AMP的来源参数：

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def verified_request?
    # 针对AMP的JSON请求，验证__amp_source_origin是否合法
    if request.format.json? && params[:__amp_source_origin].present?
      uri = URI.parse(params[:__amp_source_origin])
      # 替换成你实际允许的来源域名，比如生产环境换成你的正式域名
      allowed_origins = ['http://localhost:3000']
      allowed_origins.include?(uri.to_s) && super
    else
      super
    end
  end
end

同时要确保你的AMP表单里正确传递了Rails的authenticity_token：

<!-- 你的AMP表单代码 -->
<form method="post" action-xhr="/welcome/test" target="_top">
  <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
  <!-- 其他表单字段，比如你的name字段 -->
  <input type="text" name="name" placeholder="输入名称">
  <!-- AMP要求的提交状态模板 -->
  <div submit-success>
    <template type="amp-mustache">
      ✅ 提交成功！
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      ❌ 提交失败，请重试。
    </template>
  </div>
  <input type="submit" value="提交">
</form>

2. 返回符合AMP要求的响应格式 #

AMP对XHR表单提交的响应有严格要求：

• 不能返回302跳转（Rails默认的redirect_to会返回302，AMP不允许）
• 如果是成功响应，要么返回200状态码的JSON，要么设置AMP-Redirect-To头并返回200

举个控制器里的示例：

方案A：返回JSON响应（配合AMP的submit-success模板） #

# app/controllers/welcome_controller.rb
def test
  # 处理表单参数，这里假设你有对应的模型
  @record = Record.new(record_params)
  if @record.save
    # 返回成功的JSON，状态码必须是200
    render json: { status: 'success', message: '记录保存成功' }, status: :ok
  else
    # 返回错误的JSON，状态码用422（Unprocessable Entity）
    render json: { status: 'error', message: '保存失败，请检查输入' }, status: :unprocessable_entity
  end
end

private
def record_params
  params.require(:record).permit(:name) # 根据你的实际字段调整
end

方案B：跳转页面（需要设置AMP-Redirect-To头） #

如果你需要跳转到成功页面，必须通过AMP-Redirect-To头实现，不能用Rails的redirect_to：

def test
  @record = Record.new(record_params)
  if @record.save
    # 设置AMP允许的跳转头，值为目标页面的完整URL
    response.set_header('AMP-Redirect-To', 'http://localhost:3000/welcome/success')
    render json: { status: 'success' }, status: :ok
  else
    # 错误时返回JSON让AMP显示错误模板
    render json: { status: 'error', message: '保存失败' }, status: :unprocessable_entity
  end
end

3. 配置CORS（跨域场景下） #

如果你的AMP页面和Rails后端不在同一个域名下，还需要配置CORS允许AMP的请求。可以用rack-cors gem来实现：

1. 添加gem到Gemfile：

# Gemfile
gem 'rack-cors'

然后执行bundle install。

2. 创建CORS初始化文件：

# config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 替换成你的AMP页面所在的域名
    origins 'http://localhost:3000'
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      # 暴露AMP需要的响应头
      expose: ['AMP-Redirect-To']
  end
end

按照上面的步骤调整后，应该就能解决表单提交失败的问题了。

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