Home

小鱼驿站

25 Aug 2014

How To Cross-Domain Post Data In Rails

今天帮同事做了一个邮件订阅的功能,订阅功能本身并不复杂;但是由于订阅页面是放在GitHub Page上的,所以涉及到浏览器中跨域提交数据的问题。

这里我们大致可以将服务需求分为客户端和服务端。 客户端是一个Github静态页面,你可以通过 votenotes.com 访问;服务端是一个提供API调用的Rails。

1、客户端代码, 设置Ajax请求参数crossDomain为true
$.ajax({
  type: 'POST',
  crossDomain: true, // sert crossDomain true
  url: 'http://localhost:3000/sub_emails',
  data: data ,
  dataType: 'json',
  success: function(responseData) {
    //省略
  }
});
2、修改Rails API代码,去除token验证并设置 CORS ACCESS HEADER
class SubEmailsController < ApplicationController

  skip_before_filter :verify_authenticity_token

  before_filter :cors_preflight_check
  after_filter :cors_set_access_control_headers

  def create
    SubEmail.create(email: params[:email])
    render status: 200, json: { message: "Sub Successful" }
  end

  private

  def cors_set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE, OPTIONS'
    headers['Access-Control-Allow-Headers'] = 'Origin, Content-Type, Accept, Authorization, Token'
    headers['Access-Control-Max-Age'] = "1728000"
  end

  def cors_preflight_check
    if request.method == 'OPTIONS'
      headers['Access-Control-Allow-Origin'] = '*'
      headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE, OPTIONS'
      headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version, Token'
      headers['Access-Control-Max-Age'] = '1728000'

      render :text => '', :content_type => 'text/plain'
    end
  end
end

至此,数据已经可以从http://votenotes.com/ 提交到 http://localhost:3000/sub_emails了,实现了跨站数据提交的功能。

特别注意:

以上代码中Api接口关闭了CSRF Token验证,所以很容易被人CSRF攻击。解决办法可以尝试采用约定协议通信,并对通信凭证签名加密的方式。不过由于本应用本身对数据要求不是很敏感,所以暂时不考虑了。

延伸思考:

以上实现方式,假如在完全解决了安全问题的情况下, 是否可以做到前后端分离呢?从而开发网站也就像做App一样,后端统一为一套Api接口了。

Til next time,
small_fish__ at 22:31

scribble