我們知道因?yàn)闉g覽器的『同源策略』策略，不同域名下的資源是不能共享的双揪，尤其是我們在web開發(fā)中最常用的ajax請求售碳，XMlHttpRequest 是不支持請求不同域名的資源的，所以本文我們就來講一下礼旅，在使用Rails作為后端服務(wù)的時候，如何解決資源共享問題颓影。

JSONP

JSONP(json with padding) 是目前使用最為廣泛的解決方案各淀，它是利用了HTML中script標(biāo)簽不受限于 『同源策略』的特點(diǎn)，將要請求的URL诡挂，填寫在script標(biāo)簽的src屬性上碎浇，然后等待服務(wù)端返回一段javascript代碼，并且執(zhí)行特定名稱的回調(diào)函數(shù)璃俗，這就可以模擬ajax請求了奴璃。但是JSONP也有它的缺點(diǎn)，就是只可以使用GET 請求城豁，無法對資源進(jìn)行有副作用的操作苟穆。

下面這段代碼就是客戶端，通過JSONP去請求服務(wù)器端資源的例子唱星，可以看到要使用jsonp的話雳旅，需要在URL的最后加上callback參數(shù)，讓服務(wù)器知道返回的js代碼中應(yīng)該調(diào)用哪一個回調(diào)函數(shù)间聊。

<!-- http://server1.com -->
<script type="text/javascript">
  // 這里handleResponse函數(shù)作為 處理請求響應(yīng)的回調(diào)函數(shù)攒盈。
  function handleResponse (json) {
    //do something.
  }
</script>

<script type="text/javascript"
        src="http://server2.com/posts/1.js?callback=handleResponse">
</script>

同樣的我們需要在服務(wù)器端做一些相應(yīng)的處理，Rails已經(jīng)幫我們封裝好了一下實(shí)現(xiàn)的細(xì)節(jié)ActionController::Base#render 接受callback參數(shù)哎榴，我使用params[:callback]型豁，去設(shè)置客戶端指定要執(zhí)行的回調(diào)函數(shù)，最后Rails在返回的Javascript代碼中就會調(diào)用該函數(shù)尚蝌，并且將json數(shù)據(jù)作為參數(shù)傳入其中迎变。

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的方式，來返回?cái)?shù)據(jù)飘言，但如果你要是使用Jbuilder這樣的json view template 的話衣形，恐怕就要再折騰折騰了。使用jbuilder集成 jsonp的話姿鸿，是沒有現(xiàn)成的gem可以使用的了（有一個叫 jpbuilder 的gem泵喘，之前是支持的，不過因?yàn)槟昃檬薨忝睿呀?jīng)死掉了）下面提供一個比較巧妙的解決辦法：

# 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 這個方法芜繁，它可以將模板渲染后的結(jié)果，作為字符串返回绒极，這里我們使用返回的字符串骏令，在作為json輸出返回給客戶端，并且使用了垄提，上面的例子寫到的榔袋，callback回調(diào)函數(shù)周拐。這樣通過一點(diǎn)小的改造，就可以讓jbuilder支持 jsonp了凰兑。

CORS

**CORS( cross domain resources shard) **是最新的W3C Web標(biāo)準(zhǔn)解法妥粟，專門用于跨域的資源共享問題，它要比jsonp強(qiáng)大的多吏够，而且目前所有主流瀏覽器的最新版都支持勾给。說到和Jsonp的比較，jsonp其實(shí)是一種解決跨域問題的小技巧锅知。它在使用上有諸多限制播急，比如對資源的請求只能是，GET 請求售睹，無法對請求來源進(jìn)行限制等桩警。而CORS本身就是為解決跨域問題，而創(chuàng)建的侣姆，所以在功能上生真，要比JSONP全面，CORS支持HTTP的所有動詞（POST DELETE 等等）捺宗，并且它采用服務(wù)器端白名單的模式柱蟀，去篩選那些域名下發(fā)來的請求是可以被處理的。

使用CORS的工作步驟就是蚜厉，首先由客戶端长已，發(fā)起一個稱為"預(yù)檢查"的OPTIONS請求，然后服務(wù)器接收到該請求后判斷HTTP頭中的『來源』是否在白名單中昼牛，如果是术瓮，那么就返回『預(yù)檢查成功』給客戶端，客戶端接收到后贰健，就會發(fā)送真實(shí)的請求胞四。

cors_flow.png

Rails

在Rails當(dāng)中使用的話，需要使用 rack-cors 這個gem 從名字就能看出來伶椿，它是從作為rack層中間件辜伟，直接支持CORS的options預(yù)檢查請求，并且還提供了DSL來支持白名單和其他的限制策略脊另。

首先我們將它添加到Gemfile中

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

然后我們就可以在config/application.rb 中使用rack-cors提供的DSL進(jìn)行配置了导狡。

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

• origins 用于指定那些，可請求域名的白名單偎痛，可以使用字符串?dāng)?shù)組或者旱捧，正則表達(dá)式
• resource 通過正則表達(dá)式過濾，那些PATH上的資源是可以請求的踩麦。
  • headers 指定允許客戶端枚赡，請求攜帶的headers字段氓癌，:any 表示任意
  • methods 可接受請求的HTTP動詞

請求

我們通過curl 向白名單中的資源發(fā)送 options 預(yù)檢查請求：

--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

可以看到服務(wù)成功的接收了請求，并返回了相應(yīng)的頭信息标锄。

瀏覽器支持

目前主流的瀏覽器都已經(jīng)支持了CORS標(biāo)準(zhǔn)特性顽铸，最起碼IE8以上的瀏覽器是支持的茁计，尤其在現(xiàn)在大部分場景都是在使用移動瀏覽器的情況下料皇，瀏覽器支持已經(jīng)是我們無需多慮的問題了。

• 桌面瀏覽器

• 移動瀏覽器

結(jié)語

本文上面介紹了兩種解決跨域請求問題的方案星压，其中比較推薦的方案是CORS践剂，因?yàn)樗荳3C的事實(shí)標(biāo)準(zhǔn)并且相較于JSONP 功能更為全面，只有在需要對舊版本瀏覽器支持的情況下娜膘，才需要特別的使用JSONP 來解決跨域問題逊脯。