2

我正在使用 Angular 2 发出 API(rails) 请求。当我通过 Angular 发出 http 请求时，出现以下错误： XMLHttpRequest cannot load 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

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

4

1 回答 1

2

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

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

于 2017-03-10T18:08:35.910 回答