Angular 2 应用程序到 Rails 5 后端的 CORS 问题答案

【问题标题】：CORS issue on Angular2 app to Rails5 Back-endAngular 2 应用程序到 Rails 5 后端的 CORS 问题
【发布时间】：2017-07-24 23:19:42
【问题描述】：

从我记事起，我就一直在与 CORS 作斗争，但我正在尝试一件非常简单的事情：C9 上的 3 个微服务 - 所有 3 个差异端口，因此来源不同。

在 Rails 中：

Program A-cors.rb-不起作用

Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
     origins '*'

     resource '*',
       headers: :any,
       methods: [:get, :post, :put, :patch, :delete, :options, :head]
    end
end

Program B - cors.rb有效

Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
     origins '*'

     resource '*',
       headers: :any,
       methods: [:get, :post, :put, :patch, :delete, :options, :head]
    end
end

Angular2 服务也非常相似（只是名称改变）所以我只显示

Program As - service

import { Injectable } from '@angular/core'
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import { Document } from './document';

@Injectable()
export class DocumentService{
    private documentsUrl = "//freeland-camp-documents-dnorthrup.c9users.io/freelance_documents.json";

    constructor(
        private http: Http    
    ) {}

    getDocuments(): Observable<Document[]> {
        let headers = new Headers({ 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
        let options = new RequestOptions({ headers: headers });
        return this.http.get(this.documentsUrl)
                        .map((response: Response) => <Document[]>response.json())
                        .catch(this.handleError);
    }

    private handleError (error: Response | any) {
        // In a real world app, we might use a remote logging infrastructure
        let errMsg: string;
        if (error instanceof Response) {
          const body = error.json() || '';
          const err = body.error || JSON.stringify(body);
          errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
          errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}

let headers 是我在阅读另一篇文章后尝试做出的最新更改。根据我对 CORS 的了解，Rails 禁止这样做，但是，每次从 Angular 进行调用时，我都会看到

Started GET "/freelance_documents.json" for 108.51.108.71 at 2017-03-04 23:46:38 +0000
Processing by FreelanceDocumentsController#index as JSON
  FreelanceDocument Load (0.5ms)  SELECT "freelance_documents".* FROM "freelance_documents" ORDER BY created_at DESC
Completed 200 OK in 8ms (Views: 6.5ms | ActiveRecord: 0.5ms)

在控制台中 - 好像 Rails 认为它成功发生了（我认为这是因为 Rails 处于 API 模式并且 JSON 总是呈现？

我到底错过了什么？程序 B 最初在那里有真正的原始 URL 并且仍然有效，将其更改为 * 并没有解决任何问题。

根据我发现的 Rails5 文章，我还放置了：

config.action_dispatch.default_headers = {
  'Access-Control-Allow-Origin' => 'freeland-camp-documents-dnorthrup.c9users.io:8082',
  'Access-Control-Request-Method' => %w{GET POST OPTIONS}.join(",")
}

在 Application.rb 中无济于事。欢迎任何见解 - 我没有想法。我尝试使用 Chrome 的插件绕过标头（无效）并导致Program A 工作但打破Program B 说“origin evil.com 不够”。 - 这是我没有*的时候。

欢迎任何意见。

【问题讨论】：

标签： ruby-on-rails angularjs cors ruby-on-rails-5

【解决方案1】：

对于遇到这种情况的人：

我能够通过修改解决我的问题 config/application.rb 包括：

config.action_dispatch.default_headers = {
  'Access-Control-Allow-Origin' => '*',
  'Access-Control-Request-Method' => %w{GET POST OPTIONS}.join(",")
}

是正确的解决方案 - 似乎我遇到了一些缓存问题。我没有使用 * 表示 Origin，而是调用它的确切域。

最后我需要cors.rb 两者都有：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
     origins '*'

     resource '*',
       headers: :any,
       methods: [:get, :post, :put, :patch, :delete, :options, :head]
    end
end

和application.rb 拥有

config.action_dispatch.default_headers = {
  'Access-Control-Allow-Origin' => '*',
  'Access-Control-Request-Method' => %w{GET POST OPTIONS}.join(",")
}

【讨论】：