当角度请求到Rails时，Access-Control-Allow-Origin出错

Question

我正在使用Angular 2发出一个API(rails)请求。当我通过angular发出http请求时，我得到以下错误: XMLHttpRequest无法加载https://api-url。对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“access - control -Allow-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

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

Answer 1

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

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