[英]Typescript - AWS CDK Enable CORS
Part of my cdk project is a Websocket that gets output of a StepFunction which is triggered by a POST
Request.我的 cdk 项目的一部分是 Websocket,它获取由
POST
请求触发的 StepFunction 的 output。 This whole workflow works in the aws console just as postman.整个工作流程在 aws 控制台中运行,就像 postman 一样。
But if I try it over the frontend I receive a CORS error:但是如果我在前端尝试它,我会收到 CORS 错误:
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have set up my CORS options like this:我已经像这样设置了我的 CORS 选项:
const api = new apigw.RestApi(this, `${props.devName}BookingApi`, {
// set up CORS
defaultCorsPreflightOptions: {
allowHeaders: [
'Content-Type',
'X-Amz-Date',
'Authorization',
'X-Api-Key',
'X-Amz-Security-Token'
],
statusCode: 200,
allowMethods: ['OPTIONS', 'GET', 'POST', 'DELETE'],
allowCredentials: true,
allowOrigins: Cors.ALL_ORIGINS
},
deploy: true
});
If I manually enable CORS in the AWS console I do not receive a CORS error from the frontend.如果我在 AWS 控制台中手动启用 CORS,我不会从前端收到 CORS 错误。 The CORS options in the code are the same as the ones I put in manually.
代码中的CORS选项和我手动输入的是一样的。 Also strange is, that eventhough I get the CORS error from the frontend, the WebSocket posts the output of the StepFunction.
同样奇怪的是,即使我从前端收到 CORS 错误,WebSocket 也会发布 StepFunction 的 output。
I have read this but the solution does not work for me.我读过这篇文章,但该解决方案对我不起作用。
edit1: added Errormessage edit1:添加了错误信息
I have found the solution!我找到了解决方案!
The setup was fine like this.这样的设置很好。 I was missing this part in the
apigw.AWSIntegration
options:我在
apigw.AWSIntegration
选项中遗漏了这一部分:
integrationResponses: [
{
responseParameters: {
'method.response.header.Access-Control-Allow-Origin': "'*'",
},
responseTemplates: {
'application/json': JSON.stringify({
message: '$util.parseJson($input.body)',
state: 'ok',
}),
},
statusCode: '200',
and also并且
methodResponses: [{
statusCode: '200',
// important for CORS
responseParameters: {
'method.response.header.Content-Type': true,
'method.response.header.Access-Control-Allow-Origin': true,
'method.response.header.Access-Control-Allow-Credentials': true
}
}]
in .addMethod
在
.addMethod
中
edit1: This link helped me to find the solution edit1:此链接帮助我找到了解决方案
edit2: updated body of methodResponses
: edit2:更新了
methodResponses
的主体:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.