当角向导轨请求时，访问控制 - 允许原始的错误

Question

我正在使用Angular 2来提出API（Rails）请求。当我通过Angular提出HTTP请求时，我会收到以下错误： xmlhttprequest无法加载https：//api-url。对飞行前请求的响应不会传递访问控制检查：在请求的资源上没有"访问控制"标头。因此，不允许访问原点'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 Server中，我使用GEM'JSONAPI-RESOURCES'TO OPEN 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 I中有错误。

Answer 1

这是因为CORS。长话短说，默认情况下，浏览器禁止一个域（http：//localhost：4200）向另一个域提出AJAX请求（http：//api-url）。它在" Postman"中起作用，因为这是一个扩展名，然后CORS不适用。如果要解决此问题，则必须配置服务器以返回某些标头向客户端说允许CORS连接。

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