提问者:小点点

S3API网关Lambda DynamoDb设置上CloudFront静态网站AWSCDKCORS错误


我正在使用AWSCDK(v1.87.1(build 9eeaa93))将我的基础架构定义为代码。我使用C#来定义我的CDK堆栈。

我的数据存储在DynamoDb和一个由Lambda函数支持的API网关中,以读取/写入DynamoDb。这是我的后端。

我的前端是一个简单的静态网站(超文本标记语言JS),托管在通过CloudFront分发的AWSS3上。

当我使用curl或在AWS控制台中独立测试我的API时,它可以正常工作。但是,当我在静态网站页面中使用fetch()浏览器API调用API时,我会收到以下错误(在浏览器中):

从源https://abcdefg.cloudfront.net获取https://xxxxxxxx.execute-api.ap-south-1.amazonaws.com/prod/Account的权限已被CORS策略阻止:请求的资源上不存在Access-Control-Allow-Origin标头。如果不透明响应满足您的需求,请将请求的模式设置为no-cors以获取禁用CORS的资源。

我的CorsOptions定义如下:

    var defaultCorsPreflightOptions = new CorsOptions() {
        AllowOrigins = Cors.ALL_ORIGINS,
        AllowMethods = Cors.ALL_METHODS,
        AllowHeaders = new [] {"*"},
        AllowCredentials = true,
        MaxAge = Duration.Days(0)
    };

我的API如下:

    var api = new RestApi(this, "my-api", new RestApiProps {
        RestApiName = "My Service",
        Description = "This is the service API"
    });

我的资源创建添加了用于预检的CorsOption(在上面的错误消息“帐户”将是添加到根目录的资源):

        var resourceType = api.Root.AddResource(ent);
        resourceType.AddCorsPreflight(defaultCorsPreflightOptions);

我的lambda处理程序也有

if(method == "OPTIONS") {
  const response = {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Headers" : "Content-Type",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "OPTIONS,POST,PUT,GET,DELETE"
    }
  };
  return response;      
} else if(method === "POST") {
     // ... omitted
}

调用RESTAPI的JS客户端代码是:

    const response = await fetch(`${api_url}/${entity}`,{
        method: 'POST',
        mode: 'cors',
        body: item,
        headers: {
            'Content-Type': 'application/json'
        }
    });

附加到CloudFront分布的行为:

        // The cloudfront distribution for the website
        var behavior = new Behavior() {
            IsDefaultBehavior = true,
            AllowedMethods = CloudFrontAllowedMethods.ALL,
            MaxTtl = Duration.Seconds(0),
            MinTtl = Duration.Seconds(0),
            DefaultTtl = Duration.Seconds(0),
            Compress = false,
            ForwardedValues = new CfnDistribution.ForwardedValuesProperty() {
                QueryString = true,
                Headers = new [] {"Authorization", "Access-Control-Allow-Origin"}
            }
        };

我的CloudFront分布如下:

        var distribution = new CloudFrontWebDistribution(this, "StaticWebsiteDistribution", new CloudFrontWebDistributionProps() {
            OriginConfigs = new [] {
                new SourceConfiguration() {
                    S3OriginSource = new S3OriginConfig() {
                        S3BucketSource = bucket
                    },
                    Behaviors = new [] {
                        behavior
                    }
                }
            }
        });

我的S3 Bucket部署代码是:

        // The S3 bucket deployment for the website
        var deployment = new BucketDeployment(this, "WebsiteDeployment", new BucketDeploymentProps(){
            Sources = new [] {Source.Asset("./website")},
            DestinationBucket = bucket,
            Distribution = distribution
        });

我尝试过查看AWSCDK留档。我也尝试过在API级别添加默认CORS选项,但没有任何成功。我错过了什么?请帮忙。


共1个答案

匿名用户

我想通了。错误出现在POST/GET/DELETE/PUT方法的Lambda处理程序中。我需要返回标头(下面给出的示例):

  return {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "*",  // I was missing this
      "Content-Type": "application/json"   // and this
    },
    body: JSON.stringify({"id":`${id}`})   // and this was a string earlier
  };

我在客户端处理fetch()响应时遇到了另一个错误。我使用的是response. json(),而它应该是response.text()(因为我之前在响应正文中发送文本)。

我被curl响应(在我的测试中)误导了,它只是纯文本,而处理fetch()响应存在JSON解析问题。

要点:检查您的Lambda处理程序响应。