当 Angular 请求 Rails 时 Access-Control-Allow-Origin 出错

Question

我正在使用 Angular 2 发出 API(rails) 请求。当我通过 angular 发出 http 请求时，出现以下错误： XMLHttpRequest 无法加载 https://api-url. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' 因此不允许访问。响应具有 HTTP 状态代码 404。但是，如果我尝试通过 Postman 或浏览器本身发出请求，我不会收到任何错误。数据显示正常 angular代码：

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 控制器中，我有此代码进行身份验证并将 headers 设置为请求：

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

当我在浏览器或使用 postaman 中发出请求时，header 正常显示，但在 Angular 中出现错误。

Answer 1

这是因为 CORS. Long story short, browsers forbid by default one domain (http://localhost:4200) to make AJAX requests to another one (http://api-url)。它在 "postman" 中工作，因为这是一个扩展，因此 CORS 不适用。如果你想解决这个问题，你必须将你的服务器配置为 returns 某些 header 告诉客户端它允许 CORS 连接。

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

当 Angular 请求 Rails 时 Access-Control-Allow-Origin 出错

Error in Access-Control-Allow-Origin when Angular request to Rails

ruby-on-rails

ruby-on-rails-3

ruby-on-rails-4

jsonapi-resources

angular