Angular 角度HTTP请求工作，但HttpClient失败

我构建了一个支持CORS的API，但是

HttpClient

在客户端给我带来了一些奇怪的东西。当我在Chrome中查看Network选项卡时，我看到了对我的请求的正确响应，但是由于我在本地运行，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)

但是，如果我查看网络选项卡，以下是响应：

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: [ ... ]
    }

出于安全原因，我在回复中省略了一些内容

有人知道发生了什么事吗？为什么“网络”选项卡工作，而“角度”选项卡不工作

---

编辑：这是AWS API网关的一部分。所有资源都启用了CORS，但由于某种原因，与Lambda集成的端点向我抛出了这个问题。其他端点直接连接到DynamoDB并完美地工作…

在引擎盖下-浏览器成功地向您的API发出请求，但由于请求具有不同的来源，并且缺少访问控制Allow origin标头-由于安全原因，它被阻止，这是现代web浏览器的标准行为

您可以阅读更多关于CORS的信息

如我所见，您正在使用AWS API网关-

编辑

若您启用了CORS，则状态代码为200，并且仍然缺少访问控制允许您可能在API网关处使用Lambda代理集成。在这种情况下，您的Lambda负责返回标题等

所以响应对象应该如下所示：

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

---

据我所知，有两种选择。

---

第一个是修改您的后端，以便它在Access Control Allow Origin头中发送localhost，第二个（对我来说是更简单的一个）是代理您的api调用。如果您使用angular cli，您可以将其配置为代理您的请求，如果没有，您可以使用nginx，只需下载它，甚至不需要安装任何东西，然后修改conf文件（fiy）

@Michal Z.-请参阅我更新的响应…所有资源都启用了CORS，但只有调用Lambda的资源才可以使用。是的，我现在看到了。。。无论如何-如果状态为200，那么CORS可能有问题。这是一个Lambda代理集成问题…如果我关闭代理集成，它将工作，但我依赖于请求主体/参数…还有另一种可能性。。。如果你在API网关上使用Lambda代理集成-那么你的Lambda负责返回标题等。哈，你在我点击“添加评论”后写它：D是的，肯定是这样-检查这个：你需要标题[''Access-Control-Allow-Origin']=。。。

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