Heroku Rails CORS 问题答案

【问题标题】：Heroku Rails CORS issueHeroku Rails CORS 问题
【发布时间】：2013-11-21 21:44:03
【问题描述】：

我已经构建了一个我在 Heroku 上托管的 rails restful 服务和一个我试图从我的本地机器上运行的 Angular 客户端。最终，该客户端将运行添加到 phonegap 项目中。但是，现在我正在用 chrome 和 ie 测试应用程序，我的浏览器不断返回下面的错误。

XMLHttpRequest cannot load  Origin http://localhost is not allowed by Access-Control-Allow-Origin.

这是我收到的错误消息。在推送到 Heroku 之前，我遇到了这个问题，并通过在我的回复中添加访问标头来解决它。

    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'] = 'http://localhost' #*
        headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
        headers['Access-Control-Allow-Headers'] = %w{Origin Accept Content-Type X-Requested-With X-CSRF-Token}.join(',')
        headers['Access-Control-Max-Age'] = "1728000"
end

这似乎不起作用。由于某种原因，这不适用于 Heroku。有谁知道如何解决这个问题？

【问题讨论】：

您解决了这个问题吗？我有同样的...
是的......我会在下面发布答案

标签： ruby-on-rails angularjs heroku cordova cors

【解决方案1】：

Rails 4 的一种可能解决方案（未检查早期版本）。我使用rails-api 创建独立的 API 服务器。因此，基于ActionController::API 的示例。如果使用ActionController::Base，同样的解决方案必须能正常工作。

# app/controllers/application_controller.rb
class ApplicationController < ActionController::API
  include ActionController::ImplicitRender
  include ActionController::MimeResponds

  def cors_preflight_check
    headers['Access-Control-Max-Age'] = '1728000'

    render json: {} # Render as you need
  end
end


# config/application.rb
class Application < Rails::Application
  config.action_dispatch.default_headers = {
    'Access-Control-Allow-Origin' => '*',
    'Access-Control-Allow-Methods' => 'POST, PUT, PATCH, DELETE, GET, OPTIONS',
    'Access-Control-Request-Method' => '*',
    'Access-Control-Allow-Headers' => 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  }
end


# config/routes.rb
# Last route definition code line
match '*path', to: 'application#cors_preflight_check', via: [:options]

这个解决方案对我来说似乎不那么骇人听闻。此外，它还关注“Rails-way”中的OPTIONS HTTP 方法。

【讨论】：

感谢 Fetalion，它对我有用，虽然我不知道它是否会导致一些安全问题。我只修改了 config/application.rb 文件，然后从我的localhost 发出了一个简单的 XMLHttpRequest。
哇，在用 heroku 寻找解决 CORS 一般问题的几天后，我偶然发现了这个，瞧！有用！谢谢，Fetalion。
在 Rails 5 上也能正常工作

【解决方案2】：

class ApplicationController < ActionController::Base
protect_from_forgery
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-Allow-Headers'] = %w{Origin Accept Content-Type X-Requested-With auth_token X-CSRF-Token}.join(',')
    headers['Access-Control-Max-Age'] = "1728000"
end

def cors_preflight_check
  if request.method == "OPTIONS"
    headers['Access-Control-Allow-Origin'] = 'http://localhost'
    headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
    headers['Access-Control-Allow-Headers'] = %w{Origin Accept Content-Type X-Requested-With auth_token X-CSRF-Token}.join(',')
    headers['Access-Control-Max-Age'] = '1728000'
    render :text => '', :content_type => 'text/plain'
  end
end
end

这似乎成功了。

【讨论】：

是的，我看到了这个解决方案，但我不喜欢它。我将在我的解决方案下方添加。

【解决方案3】：

我使用 rails-api，这个解决方案对我有用

https://til.hashrocket.com/posts/4d7f12b213-rails-5-api-and-cors

注意：将来源 'localhost:4200' 更改为来源 '*'

【讨论】：