AWS CDK LambdaRestApi 启用 CORS 问题

Question

我有一个 CDK 项目，其中 Api 网关由 lambda 函数支持。我有一个指向我的 CloudFront 发行版的域

mydomain.com

和一个指向我的 REST API 的子域

api.mydomain.com

。在浏览器中，当我点击

 POST api.mydomain.com/api/sendEmail

时，我遇到了 CORS 问题。我已经尝试过所有方法，但没有一个能够真正启用 CORS。这是可能与我的情况相关的设置，但我找不到在 CDK 中启用它的方法。

1. 我尝试向我的资源添加响应方法

const api = new apigw.LambdaRestApi(this, 'APIGateway', {...});
const items = api.root.addResource('sendEmail');
    items.addMethod('POST', new apigw.LambdaIntegration(mailerLambdaFunction), {
      methodResponses: [{
        statusCode: '200',
        responseParameters: {
          "method.response.header.Access-Control-Allow-Headers": true,
          "method.response.header.Access-Control-Allow-Methods": true,
          "method.response.header.Access-Control-Allow-Credentials": true,
          "method.response.header.Access-Control-Allow-Origin": true,
        }
      }]
    })

2. 我尝试从我的 lambda 函数返回预定义的响应

{
    body: JSON.generate(message: 'Thank you for reaching out! I\'ll contact you as soon as I can'),
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Headers': 'Content-Type',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
    },
    isBase64Encoded: false
  }

3. 我尝试添加

   defaultCorsPreflightOptions

   （在此处回答 AWS CDK API Gateway 启用 Cors），但它不起作用。

更新

我继续单击启用 CORS，这就是发生的情况。无法将 Access-Control-Allow-Origin 方法响应标头添加到 POST 方法。我将其添加到我的代码中。但是，我无法添加集成响应，它呈灰色显示。

Answer 1

您似乎没有处理 OPTIONS 请求的路线。您需要添加它并提供与 Lambda 函数相同的标头以允许

POST api.mydomain.com/api/sendEmail

你是这样添加

defaultCorsPreflightOptions

的吗？这个方法对我有用。

const api = new apigw.LambdaRestApi(this, 'APIGateway', {
    ...,
    defaultCorsPreflightOptions: {
            allowOrigins: ['*'],
            allowMethods: ['*'],
            allowHeaders: ['*']
        }
});

Answer 2

我查看了 lamda 日志，发现我没有从前端应用程序向后端 lambda 发送正确的 JSON。 以前，我发送 AJAX 请求是这样的：

var request = $.ajax({
                       url: url,
                       crossDomain: true,
                       method: "POST",
                       data: {
                         data1: 'Test1',
                         data2: 'Test2',
                         data3: 'Test3'
                       },
                       dataType: "json",
                       contentType: 'application/json'
                     });

我把它改为：

var data = {
             name: $('#requestername').val(),
             email: $('#requesteremail').val(),
             message: $('#requesterMessage').val()
           }

           /* Send the form data using ajax */
           var request = $.ajax({
             url: url,
             crossDomain: true,
             method: "POST",
             data: JSON.stringify(data),
             dataType: "json",
             contentType: 'application/json'
           });

此外，我意识到当发生错误时，我没有从后端 API 代理集成返回正确的 CORS 标头。这就是为什么我遇到 CORS 问题 - 请求中的 JSON 错误，并且在解析实际请求正文时出错。成功和错误响应都应返回 CORS 标头。

# success
{
    body: JSON.generate(message: 'Message'),
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Headers': 'Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
      'Access-Control-Allow-Methods': 'GET,OPTIONS,POST',
      'Access-Control-Allow-Origin': '*'
    },
    isBase64Encoded: false
  }
# error
{
    body: JSON.generate({ error: error.message }),
    statusCode: 400,
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Headers': 'Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
      'Access-Control-Allow-Methods': 'GET,OPTIONS,POST',
      'Access-Control-Allow-Origin': '*'
    },
    isBase64Encoded: false
  }