如何在 Rails 4 应用程序中启用 CORS

Posted

技术标签:

【中文标题】如何在 Rails 4 应用程序中启用 CORS【英文标题】:How to enable CORS in Rails 4 App 【发布时间】:2015-06-27 08:51:34 【问题描述】:

我正要拔掉头发...从早上开始,我一直在尝试在这个 Rails 应用程序中启用 CORS,但它不起作用。我试过this、使用Rack Cors Gem、this answer和这个post都没有成功。

有人能指出正确的方向吗?

这是我的 js:

      var req = new XMLHttpRequest();

      if ('withCredentials' in req) 
            // req.open('GET', "https://api.github.com/users/mralexgray/repos", true);
            req.open('GET', "http://www.postcoder.lc/postcodes/" + value, true);
            // Just like regular ol' XHR
            req.onreadystatechange = function() 
                if (req.readyState === 4) 
                    if (req.status >= 200 && req.status < 400) 
                        // JSON.parse(req.responseText) etc.
                        console.log(req.responseText);
                     else 
                        // Handle error case
                    
                
            ;
            req.send();
        

当我尝试这个 url(来自外部客户端):https://api.github.com/users/mralexgray/repos 工作正常时,我假设问题出在我的 Rails API 上。我错了吗?

编辑:目前我的控制器中有这个:

skip_before_filter :verify_authenticity_token
before_filter :cors_preflight_check
after_filter :cors_set_access_control_headers

# For all responses in this controller, return the CORS access control headers.
def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Max-Age'] = "1728000"
end

# If this is a preflight OPTIONS request, then short-circuit the
# request, return only the necessary headers and return an empty
# text/plain.

def cors_preflight_check
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version'
  headers['Access-Control-Max-Age'] = '1728000'
end

【问题讨论】:

我试过了,没用。我什至使用了示例应用程序,但仍然没有运气 你曾经得到这个工作?我有一个有角度的前端打电话,我也尝试了所有的解决方案。 rack cors gem 对我不起作用。 【参考方案1】:

Rack::Cors 提供对跨域资源共享的支持

启用 rackcors 的步骤:

    将此 gem 添加到您的 Gemfile

    gem 'rack-cors'

    将以下代码添加到 config/application.rb

如果您使用的是 Rails 3/4:

config.middleware.insert_before 0, "Rack::Cors" do
  allow do
    origins '*'
    resource '*', :headers => :any, :methods => :any
  end
end

如果您使用的是 Rails 5:

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: :any
  end
end

【讨论】:

很好的解释!!!这对我来说是工作和价值。谢谢。【参考方案2】:

这对我有用:

    将此添加到 Gemfile:gem 'rack-cors' 然后 bundle install

    创建一个新文件/config/initializers/cors.rb

    在文件中放置以下内容:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :patch, :put]
  end
end

就是这样!

仅供参考,说明直接来自here

【讨论】:

我正在使用:resource '*', headers: :any, methods: :any【参考方案3】:

你应该使用rack cors

它提供了一个很好的 DSL,可以在您的 config/application.rb 中使用,而不是在过滤器之前使用凌乱的标题。

一个非常宽松的方法如下,但当然,你必须稍微调整一下。

use Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: :any
  end  
end

【讨论】:

你的意思是config/application.rb 吗? 我不知道it didnt work 是什么意思:) 我在我的应用程序中使用它,它很好。你有更多的信息吗? 好的,它现在可以在 Chrome 上运行。我认为问题在于权限的种类。有趣的是,它不适用于 FF 和 Safari。我猜它与 Rails 无关,而是它的 JS 方面? 是的,也许,尝试使用这个客户端:github.com/mapbox/corslite 它的意思是跨浏览器不幸的是它只用于 GET 请求。 您能否解释一下“但当然,您必须稍微调整一下”?为什么它很重要,我们应该怎么做?

以上是关于如何在 Rails 4 应用程序中启用 CORS的主要内容,如果未能解决你的问题,请参考以下文章

使用 ruby​​ on rails 为 IGDB 启用 CORS?

如何在 MEAN STACK Web 应用程序中启用 CORS?

在 React 应用中启用 CORS

更新文档时出现 XMLHttpRequest 错误,但应启用 CORS

Heroku、Rails 4 和 Rack::Cors

如何获取 Rails 应用程序的 CORS 标头以访问 aws s3 存储桶?