Ember-CLI 和 Rails：没有“Access-Control-Allow-Origin”标头错误答案

【问题标题】：Ember-CLI and Rails: No 'Access-Control-Allow-Origin' header errorEmber-CLI 和 Rails：没有“Access-Control-Allow-Origin”标头错误
【发布时间】：2015-01-27 11:07:38
【问题描述】：

我正在尝试使用 Ember-CLI (ember.js) 和 Rails 4.2.0 构建应用程序。我将 Ember 和 Rails 代码库分开，所以我使用 rack-cors gem 启用了 CORS。当 Ember 应用程序向 Rails api 发出请求时，我不断收到以下错误：

406 Not Acceptable

还有：

No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:4200' is therefore not allowed access.

这在 Rails 方面：

Processing by CustomersController#index as HTML
Completed 406 Not Acceptable in 2ms

ActionController::UnknownFormat (ActionController::UnknownFormat):
  app/controllers/customers_controller.rb:9:in `index'

请求Accept头是：

Accept:application/json, text/javascript, */*; q=0.01

我的控制器操作是：

  def index
    @customers = Customer.all

    respond_to do |format|
      format.json { render json: @customers }
      #format.js { render json: @customers } Tried this too
    end
  end

我还有一个使用 active_model_serializer gem 的 customer_serializer。

任何帮助将不胜感激！

【问题讨论】：

我从未使用过rack-cors，但它似乎不起作用。 Rails 的响应中实际上是否有 Access-Control-Allow-Origin 标头？
没有 :defaults => { :format => :json } 在我的客户路线上，标题没有被设置。这解决了它。不太明白为什么。

标签： ruby-on-rails ruby-on-rails-4 ember.js

【解决方案1】：

我在 ember 上使用 rails-csrf 将 X-CSRF-Token 添加到我的所有请求中，rails 默认会查找它，因此您只需将 csrf 令牌发送到 ember 即可完成此工作（不需要更多 gem在导轨一侧）。首先你需要安装 rails-csrf npm 包。在您的 ember cli 文件夹中运行：

npm install rails-csrf --save

然后将初始化器添加到 app/app.js 文件中：

loadInitializers(App, 'rails-csrf');

然后你将不得不生成一个应用程序路由：

ember generate route application

并为其添加一个 before_model：

export default Ember.Route.extend({
  beforeModel: function() {
    return this.csrf.fetchToken();
  }
});

如果您使用 --proxy http://localhost:3000 选项启动了 ember 服务器，则 fetchToken 默认会在 http://localhost:3000/api/csrf 中查找您的 csrf 令牌。所以你需要在 Rails 端添加一个路由和控制器。

首先将命名空间路由添加到您的 config/routes.rb 文件中

namespace :api do
  get :csrf, to: 'csrf#index'
end

然后在 app/controllers/api/csrf_controller.rb 中添加 csrf 控制器

class Api::CsrfController < ApplicationController
  def index
    render json: { request_forgery_protection_token => form_authenticity_token }.to_json
  end
end

现在，如果您正在运行 rails 并在浏览器中打开 http://localhost:3000/api/csrf url，您应该会看到带有 csrf 令牌的 json 哈希。现在所有 ember 对代理服务器的请求都会在 Rails 默认查找的 X-CSRF-Token 中设置 csrf 令牌。

应该就是这样，只要记住确保启动 ember 服务器时将代理设置为您的 rails 服务器，并且 rails 也已打开。

【讨论】：

在 application_controller.rb 中，我有以下内容：protect_from_forgery with: :null_session 所以我认为 CSRF 不是问题。你确定我需要这个包裹吗？ Ember-CLI + Rails 教程中没有提到：devmynd.com/blog/2014-7-rails-ember-js-with-the-ember-cli-redux
哦，如果你禁用了protect_from_forgery，你就不需要这些哈哈哈。尝试像这样启动您的 Rails 服务器： bundle exec rails server -b 0.0.0.0 和 ember 服务器： ember s --proxy localhost:3000
那行不通。不过谢谢你的帮助。这已经花费了我几个小时，而且还在不断增加！

【解决方案2】：

我的客户需要路由 :defaults => { :format => :json }

resources :customers, :defaults => { :format => :json }

这样就可以了！

【讨论】：