Rails 跨域异步请求

我们知道因为浏览器的『同源策略』策略，不同域名下的资源是不能共享的，尤其是我们在web开发中最常用的ajax请求，XMlHttpRequest 是不支持请求不同域名的资源的，所以本文我们就来讲一下，在使用Rails作为后端服务的时候，如何解决资源共享问题。

JSONP

JSONP(json with padding) 是目前使用最为广泛的解决方案，它是利用了HTML中script标签不受限于『同源策略』的特点，将要请求的URL，填写在script标签的src属性上，然后等待服务端返回一段javascript代码，并且执行特定名称的回调函数，这就可以模拟ajax请求了。但是JSONP也有它的缺点，就是只可以使用GET 请求，无法对资源进行有副作用的操作。

下面这段代码就是客户端，通过JSONP去请求服务器端资源的例子，可以看到要使用jsonp的话，需要在URL的最后加上callback参数，让服务器知道返回的js代码中应该调用哪一个回调函数。

同样的我们需要在服务器端做一些相应的处理，Rails已经帮我们封装好了一下实现的细节ActionController::Base#render 接受callback参数，我使用params[:callback]，去设置客户端指定要执行的回调函数，最后Rails在返回的Javascript代码中就会调用该函数，并且将json数据作为参数传入其中。

class PostsController < ApplicationController
  def show
    @post = Post.find(params[:id])
    respond_to do |format|
      format.js do
        render json: @post, callback: params[:callback]
      end
    end
  end
end

Jbuilder

上面的例子是使用直接渲染json的方式，来返回数据，但如果你要是使用Jbuilder这样的json view template 的话，恐怕就要再折腾折腾了。使用jbuilder集成 jsonp的话，是没有现成的gem可以使用的了（有一个叫 jpbuilder 的gem，之前是支持的，不过因为年久失修，已经死掉了）下面提供一个比较巧妙的解决办法：

# app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def show
    @post = Post.find(params[:id])
    respond_to do |format|
      format.any(:js, :json) do
        render json: render_to_string(formats: 'json'), callback: params[:callback]
      end
    end
  end
end

上面还是，那个PostsController的例子，不过这次，它使用了jbuilder做为view template ，然后紧接着就是，使用了，render_to_string 这个方法，它可以将模板渲染后的结果，作为字符串返回，这里我们使用返回的字符串，在作为json输出返回给客户端，并且使用了，上面的例子写到的，callback回调函数。这样通过一点小的改造，就可以让jbuilder支持 jsonp了。

CORS

**CORS( cross domain resources shard) **是最新的W3C Web标准解法，专门用于跨域的资源共享问题，它要比jsonp强大的多，而且目前所有主流浏览器的最新版都支持。说到和Jsonp的比较，jsonp其实是一种解决跨域问题的小技巧。它在使用上有诸多限制，比如对资源的请求只能是，GET 请求，无法对请求来源进行限制等。而CORS本身就是为解决跨域问题，而创建的，所以在功能上，要比JSONP全面，CORS支持HTTP的所有动词（POST DELETE 等等），并且它采用服务器端白名单的模式，去筛选那些域名下发来的请求是可以被处理的。

使用CORS的工作步骤就是，首先由客户端，发起一个称为"预检查"的OPTIONS请求，然后服务器接收到该请求后判断HTTP头中的『来源』是否在白名单中，如果是，那么就返回『预检查成功』给客户端，客户端接收到后，就会发送真实的请求。

cors_flow.png

Rails

在Rails当中使用的话，需要使用 rack-cors 这个gem 从名字就能看出来，它是从作为rack层中间件，直接支持CORS的options预检查请求，并且还提供了DSL来支持白名单和其他的限制策略。

首先我们将它添加到Gemfile中

gem 'rack-cors', require: 'rack/cors'

然后我们就可以在config/application.rb 中使用rack-cors提供的DSL进行配置了。

#config/application.rb
config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*' # 可以接受字符串数组或者是正则表达式
    resource %r{/(users/.*|posts/\d+).json}, headers: :any, methods: [:get]
  end
end

origins 用于指定那些，可请求域名的白名单，可以使用字符串数组或者，正则表达式
resource 通过正则表达式过滤，那些PATH上的资源是可以请求的。
- headers 指定允许客户端，请求携带的headers字段，:any 表示任意
- methods 可接受请求的HTTP动词

请求

我们通过curl 向白名单中的资源发送 options 预检查请求：

--verbose \
--request OPTIONS \
http://localhost:3000/posts/1.json \
--header 'Origin: http://server1.example.com' \
--header 'Access-Control-Request-Headers: Origin, Accept, Content-Type' \
--header 'Access-Control-Request-Method: GET'
*   Trying ::1...
* Connected to localhost (::1) port 3000 (#0)
> OPTIONS /posts/1.json HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/7.49.1
> Accept: */*
> Origin: http://server1.example.com
> Access-Control-Request-Headers: Origin, Accept, Content-Type
> Access-Control-Request-Method: GET
>
< HTTP/1.1 200 OK
< Content-Type: text/plain
< Access-Control-Allow-Origin: http://server1.example.com
< Access-Control-Allow-Methods: GET
< Access-Control-Max-Age: 1728000
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Headers: Origin, Accept, Content-Type
< Transfer-Encoding: chunked
<
* Connection #0 to host localhost left intact

可以看到服务成功的接收了请求，并返回了相应的头信息。

浏览器支持

目前主流的浏览器都已经支持了CORS标准特性，最起码IE8以上的浏览器是支持的，尤其在现在大部分场景都是在使用移动浏览器的情况下，浏览器支持已经是我们无需多虑的问题了。

桌面浏览器

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	4	3.5	8 (via XDomainRequest)10	12	4

移动浏览器

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1	yes	yes	?	12	3.2

结语

本文上面介绍了两种解决跨域请求问题的方案，其中比较推荐的方案是CORS，因为它是W3C的事实标准并且相较于JSONP 功能更为全面，只有在需要对旧版本浏览器支持的情况下，才需要特别的使用JSONP 来解决跨域问题。