向 Rails 发出 Angular 请求时，Access-Control-Allow-Origin 出错答案

【问题标题】：Error in Access-Control-Allow-Origin when Angular request to Rails向 Rails 发出 Angular 请求时，Access-Control-Allow-Origin 出错
【发布时间】：2017-08-01 04:16:45
【问题描述】：

我正在使用 Angular 2 发出 API(rails) 请求。当我通过 Angular 发出 http 请求时，出现以下错误： XMLHttpRequest 无法加载 https://api-url。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:4200' 不允许访问。响应具有 HTTP 状态代码 404。但是，如果我尝试通过 Postman 或浏览器本身发出请求，我不会收到任何错误。数据正常显示角码：

makeRequest() {
  let user = {"user": "user", "password": "password"};
  let headers: Headers = new Headers();
  headers.append('Authorization', 'Basic ' + btoa(user.user + ':'+user.password));
  headers.append('Content-Type', 'application/vn.api+json')
  let this.http.get(api-url, {headers: headers}).map(res => res.json()).subscribe(data => {
  this.data = data;
  })
 }

在我的 Rails 服务器中，我使用 gem 'jsonapi-resources' 打开 AP。在我的 api 控制器中，我有这个代码来验证和设置请求的标头：

module Api
  class ApiController < JSONAPI::ResourceController
    prepend_before_action :set_headers, :authenticate

    def context
      { current_station: @user }
    end

    private

    def authenticate
      authenticate_or_request_with_http_basic do |token, _|
      @user = User.where(api_key: token).first
      end
    end

    def set_headers
      response.headers["Access-Control-Allow-Origin"] = "*"
    end
  end
end

当我在浏览器中或使用邮递员发出请求时，标题正常显示，但在 Angular 中出现错误。

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3 angular ruby-on-rails-4 jsonapi-resources

【解决方案1】：

这是因为CORS。长话短说，浏览器默认禁止一个域 (http://localhost:4200) 向另一个域 (http://api-url) 发出 AJAX 请求。它适用于“邮递员”，因为这是一个扩展，然后 CORS 不适用。如果你想解决这个问题，你必须将你的服务器配置为返回某个标头，告诉客户端它允许 CORS 连接。

事实上，当一个网站试图向另一个域发出 AJAX 请求时，它首先发送一个OPTION 请求来询问允许的域。该列表由服务器通过标头Access-Control-Allow-Origin 返回。例如，它可以包含一个星号（“*”）来表示任何人都可以对该服务器进行 AJAX 调用。如果此标头允许您的客户端进行 AJAX 调用，您的实际请求将被执行，否则，您将收到错误（可能是您当前收到的错误）

【讨论】：