在Angular 11中，如何通过API网关将应用程序/json发送到AWS Lambda？

编辑：已解决：CORS；所需选项响应

我计划在AWS Amplify中托管一个角度应用程序。它为RESTAPI调用Lambda函数。我有一个非常成功的测试应用程序，但它不能做一件事：将JSON数据发布到托管URI

在浏览器中，我有一个Angular客户端，它有一个按钮，单击时，调用

HttpClient.post

或

HttpClient.request

。我测试了多个后端服务器：（1）NestJs/Express，（2）sam本地启动api和（3）AWS托管。本地

sam

服务器和托管环境同步，并使用相同的

模板.yaml

。这三台服务器都接受

application/json

和

application/x-www-form-urlencoded

的

Content-Type

除了托管lambda函数中的Json外，

内容类型

、服务器实例和HttpClient方法（

post

或

请求（“post”、…）

）的每种组合都有效。它似乎立即被拒绝

这个调用从未进入Cloudwatch日志，我猜这意味着它的格式不正确，并且被我不知道是什么过滤掉了。我对AWS很陌生，也不熟悉它的特殊性，所以我不确定我可以在托管环境中打开什么日志记录来捕获这一点。它失败得如此之快，从未到达日志，更不用说我的代码了，我很好奇这是一个什么问题

带有Json的Curl也可以工作：

Curl-xpost-H“内容类型：application/Json”…

总之，当使用

.POST（）

或

.request（）

方法将Json或表单样式发布到非AWS和本地AWS web服务器时，一切都很好。表单样式发布到AWS托管（通过API网关）也可以使用。命令行手工制作的带有Json的POST也可以与AWS托管（通过API网关）一起使用

仅从角度发布到AWS不起作用

ETA以下是一段代码片段：

const URI_LOCAL=“/api/music”；
const URI_HOSTED=“https://…amazonaws.com/Prod/api/music”；
const headers_j=新的HttpHeaders（{'Content Type'：'application/json'}）；
康斯特专辑={“标题”：“乌鱼之初”，“乐队”：“瓦拉比”}；
const body_j=JSON.stringify（相册）；
//这失败了
让res_j$=this.http.post（URI_托管，body_j，{headers:headers_j}）；
//这很有效
const headers_x=新的HttpHeaders（{'Content Type'：'application/x-www-form-urlencoded'}）；
const body_x='头衔=跳舞的啤酒&乐队=邪恶的伊普斯利'；
让res_x$=this.http.post（URI_托管，body_x，{headers:headers_x}）；

我也尝试过传递

album

而不是

body\u j

。这两个选项（对象或JSON字符串）都适用于URI\u LOCAL。这两个选项都不适用于URI\u HOSTED

某个地方一定有人从Angular成功地将Json发布到AWS托管环境中。有没有关于我做错了什么的提示

[ETA]以下是来自浏览器控制台的错误日志：

[Error]飞行前响应不成功
[错误]无法加载XMLHttpRequesthttps://_SNIP_.amazonaws.com/Prod/api/rebuild 由于访问控制检查。
[日志]帖子：（main.js，第194行）
HttpErrorResponse
错误：XMLHttpRequestProgressEvent{isTrusted:true，位置：0，totalSize:0，LengthComputeable:false，loaded:0，…}
headers:HttpHeaders{normalizedNames:Map，lazyUpdate:null，headers:Map}
消息：“的Http失败响应”https://_SNIP_.amazonaws.com/Prod/api/rebuild: 0未知错误“
名称：“HttpErrorResponse”
好：错
状态：0
statusText:“未知错误”
url:“https://_SNIP_.amazonaws.com/Prod/api/rebuild"
[错误]加载资源失败：飞行前响应未成功（重建，第0行）

客户 内容类型 服务器 结果 HttpClient.post json aws主持 失败 HttpClient.request json aws主持 失败 卷曲 json aws主持 成功 HttpClient.post json 山姆本地 成功 HttpClient.post json 内斯特 成功 HttpClient.post x-www-form aws主持 成功 HttpClient.post x-www-form 山姆本地 成功 HttpClient.post x-www-form 内斯特 成功 听起来像是个问题

您不仅需要在API网关内启用CORS，而且您的Lambda API网关响应还必须包括访问控制头

您的回答应该如下所示：

response = {
        statusCode: 204,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "https://www.example.com",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET",
        },
    };
    return response;
};

---

谢谢。就是这样。我对你的例子做了一些编辑，以匹配我使用的。太棒了。这让我前阵子头疼了好几个小时。24个小时我的头撞在墙上。所以，是的，我和你在一起。这么多的魔法让每件事都能端到端地进行。我想我永远不会忘记CORS，现在。我还以为这只是为了c客户端跨站点脚本编写，不询问服务器的功能。我知道CORS，但我不知道的是我必须在响应中返回标题。很高兴它得到了解决。