Angular HTTP 请求有效，但 HttpClient 失败

Question

我已经构建了一个支持 CORS 的 API，但是 HttpClient 在客户端向我抛出一些奇怪的东西。当我查看 Chrome 中的“网络”选项卡时，我看到了对我的请求的正确响应，但由于我在本地运行，Angular 抛出了一个 CORS 错误。

这是我的代码:

public search(data: string): Promise<any> {
        const url = `${Configuration.ENDPOINTS.APP}`, headers = new HttpHeaders({ 'x-api-key': 'abcd...' });
        const body = { data: data };
        return this._http.post<any>(url, body, { headers: headers }).toPromise();
}

/// View Logic
search("test").then(console.log).catch(console.error)

运行此代码，我在 Chrome 的控制台选项卡上收到以下错误:

Failed to load https://abcd.execute-api.us-east-1.amazonaws.com/v1/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

HttpErrorResponse
{
  "headers": {
  "normalizedNames": {},
  "lazyUpdate": null,
  "headers": {}
  },
  "status": 0,
  "statusText": "Unknown Error",
  "url": null,
  "ok": false,
  "name": "HttpErrorResponse",
  "message": "Http failure response for (unknown url): 0 Unknown Error",
  "error": {
    "isTrusted": true
  }
}

但是，如果我查看“网络”选项卡，会得到以下响应:

Headers
    content-length: 16865
    content-type: application/json
    date: Wed, 04 Apr 2018 17:34:28 GMT
    status: 200
    via: 1.1 cae81d5ff1d682b28f2deabdd94777d4.cloudfront.net (CloudFront)
    x-amz-apigw-id: E07puFICPHcFYCA=
    x-amz-cf-id: -UYlYK_yC8cUVZF2OnRFcUb_fIjcRrgMuvpU3ADdbpyEvPZ-nUJXNA==
    x-amzn-requestid: 6d3a0533-382e-11e8-ad31-b124cb8b7a9a
    x-amzn-trace-id: sampled=0;root=1-5ac50ca4-2411d1b5cb7d1af6232883a6
    x-cache: Miss from cloudfront

Response
    {
        meta: { ... }
        data: [ ... ]
    }

出于安全原因，我在响应中省略了一些内容。

有人知道这是怎么回事吗？为什么网络选项卡有效但 Angular 无效？

编辑:这是 AWS API 网关的一部分。所有资源都启用了 CORS，但出于某种原因，与 Lambda 集成的端点向我抛出了这个问题。其他端点直接进入 DynamoDB 并完美运行...

Answer 1

在引擎盖下 - 浏览器成功地向您的 API 发出请求，但由于请求有不同的来源并且 Access-Control-Allow-Origin header 丢失 - 由于安全原因，它被阻止，这是标准的现代网络浏览器的行为。

您可以阅读有关 CORS 的更多信息 here .

如我所见，您正在使用 AWS API Gateway - here is guide how to enable CORS at API Gateway

编辑

如果您启用了 CORS，状态代码为 200 并且仍然缺少 Access-Control-Allow-Origin，您可能在 API 网关上使用了 Lambda 代理集成。在那种情况下 - 您的 Lambda 负责返回 header 等。

所以响应对象应该是这样的:

{
    ...
    "headers": {
        "Access-Control-Allow-Origin": "*",
        ...
    },
    ...
}

more info here