Rails Gem开发（四）——rack-cors解决Ajax跨

2016-12-24 本文已影响598人 vito1994

在项目开发过程中，遇到了Ajax跨域访问资源的问题，提示出现了类似于下面这样的错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com:8080/script/jquery.js. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

经过了解和学习，我们决定使用rack-cors这个gem来解决这个问题。
github：https://github.com/cyu/rack-cors

开发前需明确的问题

什么是跨域访问？
什么是CORS？
rack-cors为我们提供了怎样的功能？

问题解决

什么是跨域？

理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
那么什么是同源？我们知道，URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
我们用一个例子来说明：
URL: http://www.example.com:8080/script/jquery.js
在这个url中，各个字段分别代表的含义：

http://——协议
www——子域名
example.com——主域名
8080——端口号
script/jquery.js——请求的地址
当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的“域”。不同的域之间相互请求资源，就叫跨域。
这里要注意，如果只是通过AJAX向另一个服务器发送请求而不要求数据返回，是不受跨域限制的。浏览器只是限制不能访问另一个域的数据，即不能访问返回的数据，并不限制发送请求。

事实上，为了解决因同源策略而导致的跨域请求问题，解决方法有五种：

document.domain
Cross-Origin Resource Sharing(CORS)
Cross-document messaging
JSONP
WebSockets

什么是CORS(跨域资源共享，Cross-Origin Resource Sharing)？

我们先来看看wiki上的定义：

跨来源资源共享（CORS）是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方式的错误处理比 JSONP 要来的好。另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

由此我们可以知道， CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。对于CORS来说，实现此功能非常简单，只需由服务器发送一个响应标头即可。服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。具体的关于CORS原理性的知识此处不再进行介绍，只在此对CORS和JSONP进行简单的比较。有关CORS的知识可以看一下这篇博客。

CORS与JSONP比较
CORS与JSONP相比，更为先进、方便和可靠。
1.JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2.使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3.JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

rack-cors怎样解决跨域问题？

Rack Middleware for handling Cross-Origin Resource Sharing (CORS), which makes cross-origin AJAX possible.

也就是说，这个gem是基于CORS来实现Ajax的跨域请求功能的，我们可以添加这个gem来解决我们项目中遇到的问题。
我们看到gem中给出的配置接口：

Rack
In config.ru, configure Rack::Cors by passing a block to the use command:

use Rack::Cors do
  allow do
   origins  'localhost:3000', '127.0.0.1:3000',
             /\Ahttp:\/\/192\.168\.0\.\d{1,3}(:\d+)?\z/
             # regular expressions can be used here
   resource '/file/list_all/', :headers => 'x-domain-token'
   resource '/file/at/*',
       :methods => [:get, :post, :delete, :put, :patch, :options, :head],
       :headers => 'x-domain-token',
       :expose => ['Some-Custom-Response-Header'],
       :max_age => 600
       # headers to expose
  end
  allow do
    origins '*'
    resource '/public/*', :headers => :any, :methods => :get
  end
end

Rails
Put something like the code below in config/application.rb of your Rails application. For example, this will allow GET, POST or OPTIONS requests from any origin on any resource.

module YourApp
  class Application < Rails::Application
    # ...
    # Rails 3/4
    config.middleware.insert_before 0, "Rack::Cors" do
      allow do
        origins '*'
        resource '*', :headers => :any, :methods => [:get, :post, :options]
      end
    end
    # Rails 5
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*', :headers => :any, :methods => [:get, :post, :options]
      end
    end
  end
end

可以看出，rack-cors实际上直接给出了借口，我们在bundle这个gem后，直接在config/application.rb文件中添加配置信息即可，而无需自己在代码中添加有关跨域资源的策略信息。

实际应用

这个gem是用在被访问的资源服务器上的，用来定义哪些域可以访问资源以及可以访问自己的哪些资源等策略信息。这个gem可以很轻松很方便地解决ajax跨域问题。

安装gem

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

修改config/application.rb
我们使用的是rails，因此只需要做以下修改即可：

config.middleware.insert_before 0, Rack::Cors do
    allow do
      origins '*'
      resource '*', :headers => :any, :methods => [:get, :post, :options]
    end
end

其中，origins用来配置可以请求自己资源的域，*表示任何域都可以请求；resource用来配置自己的哪些资源可以被请求，*代表所有资源都可以被请求，methods代表可以被请求的方法。

做完这两部，我们就可以实现跨域请求资源了。此时重启服务器，本地再次请求资源就会成功，同时我们可以看到自己的请求中多了类似下面的一些信息：

Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Max-Age: 1728000
Access-Control-Allow-Credentials: true

这样，我们便在rails中解决了Ajax的跨域请求资源的问题，项目也可以继续向前开发了。