在 AWS API 上启用了 CORS,但在 Angular 中仍然获得“No Access-Control-Allow-Origin”

Posted

技术标签:

【中文标题】在 AWS API 上启用了 CORS,但在 Angular 中仍然获得“No Access-Control-Allow-Origin”【英文标题】:CORS enabled on AWS API, but still getting "No Access-Control-Allow-Origin" in Angular 【发布时间】:2018-04-14 06:03:55 【问题描述】:

我最近在 AWS Gateway 上重组了我的 API,以使我的所有 Lambda 函数都使用代理集成 - 在此之前,每个参数都作为路径参数传入(我知道这很糟糕。)

那时我在使用 CORS 时从来没有遇到过任何问题,在过去的几个小时里我尝试了几件事来解决主题行中讨论的问题。

首先,我使用了代理资源并使用了“ANY”方法,但是当这给我带来了 CORS 问题时,我在 API 方法上启用了 CORS 并再次尝试 - 仍然没有。因此,我尝试将其更改为“POST”请求并启用 CORS - 仍然没有。我确保在每次设置更改后进行部署。然后,我摆脱了代理,而是在启用 CORS 的情况下创建了一个“POST”方法,但仍然没有。

我正在使用 Angular 的 http post 方法。

编辑:

我使用的是 Angular 1.6.4,这是我用来调用 API 的代码:

    this.checkRegistered = function(email)
        var data =  Email : email;
        var toSend = JSON.stringify(data);
        return $http.post('link', toSend);
    ;

这是我为 angular 模块服务的,它是从控制器中的这个函数调用的:

    function CheckIsRegistered(email)
    
        return userService.checkRegistered(email).then(function(res)
        if (res.data.statusCode === 200)
            return res.data.body;
        );
    

我已经配置了所有参数,以使“电子邮件”符合预期,并且我确实将“链接”一词替换为实际链接。

当我通过控制台启用 CORS 时,我按如下方式分配标头:

Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'

访问控制允许来源:'*'

这尤其令人恼火,因为我之前实际上已经处理过这个确切的问题并且相当容易地解决了它,但是现在我使用 Lambda 的代理集成我又遇到了这个问题,我似乎不太明白想办法。

感谢任何帮助。

【问题讨论】:

您查看过返回的标题吗?根据提出的要求?是预检吗?不是预检? (1) 哪个版本的角度? (2) 请求头和响应头是什么? (3) 能否展示一些相关的代码? 并不是说这可以解决您的问题,但是如果您通过客户端与 AWS 通信,这是否意味着您的密钥已暴露?坏主意。 确保在启用 CORS 标头后部署 API。很容易忘记执行部署步骤,并且在您执行之前所做的更改不会生效。 【参考方案1】:

我发现了问题 - 我必须将 CORS 的标头添加到 Lambda 响应中。这是其他有类似问题的人的代码 sn-p:

                    connection.query('arbitrary query', [params], function (error, results, field) 
            if (!error)
            
                connection.end();
                var responseBody = results; 
                response =  statusCode: 200, 
                headers:  "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token", "Access-Control-Allow-Origin": "*", 
                body: JSON.stringify(responseBody); 
                callback(null, response);
            

我将查询行放在那里只是为了说明“响应”是什么。

【讨论】:

以上是关于在 AWS API 上启用了 CORS,但在 Angular 中仍然获得“No Access-Control-Allow-Origin”的主要内容,如果未能解决你的问题,请参考以下文章

AWS API Gateway API 密钥与 Cors

使用 AWS CDK 为 AWS API 网关启用 CORS

AWS API Gateway + AWS Lambda 中的 CORS

如何在 API Gateway 和 React 应用程序之间启用 AWS 中的 CORS 策略?

AWS API Gateway CORS 问题

AWS CDK API Gateway 启用 Cors