如何从 AWS Lambda 检索数据并将其显示在 AWS S3 上托管的静态网站上？答案

【问题标题】：How to retrieve data from AWS Lambda and display it on a static website that's hosted on AWS S3?如何从 AWS Lambda 检索数据并将其显示在 AWS S3 上托管的静态网站上？
【发布时间】：2020-01-15 07:04:18
【问题描述】：

我正在尝试使用 AWS DynamoDB、Lambda、API Gateway 和 S3 创建一个简单的网站。 DDB 有一个表，表中有一个条目。 S3 有一个用于网站 HTML 的简单文件。目标是在网站中显示位于 DDB 中的条目，如果我更新 DDB 中的值，那么刷新网站应该更改数字以反映 DDB 中的更新。目前，我有一个 lambda 函数，它成功地从 DDB 检索条目。我一直试图告诉 HTML 文件调用 lambda 函数并取回数据（使用 API Gateway）。我以前从未使用过 AWS，如果这甚至不是实现此目标的正确方法，请原谅我。

下面是 lambda 函数的代码：

'use-strict';

const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient({region: 'us-location-x'});

exports.handler = (event, context, callback) => {
    let tableToRead = {
        TableName: 'dataStore',
        Limit: 10
    };

    docClient.scan(tableToRead, function(err,data){
       if(err){
           callback(err,null);
       } else {
           callback(null,data);
       }
    });
};

这是 S3 上的 HTML：

<html>
    <head>
    </head>

    <body>
        <h1> This number that's in DDB </h1>

        <div id="entries">
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script type="text/javascript">
            //This is the link generated by API Gateway
            var API_URL = 'https://xxxxxxxxxx.execute-api.us-location-x.amazonaws.com/prod/retrieveDDB';
            $(document).ready(function(){
                $.ajax({
                    type: 'GET',
                    url: API_URL,

                    success: function(data){
                        $('#entries').html('');
                        data.Items.forEach(function(tableItem){
                            $('#entries').append('<p>' + tableItem.Row + '</p>');
                        })
                    }
                });
            });
        </script>
    </body>
</html>

当我使用“测试”按钮运行 lambda 函数时，它成功地从 DDB 检索数据。但是当我尝试运行 HTML 时，它确实会显示标题文本，但它不会附加来自 DDB 的值。我假设我只是不了解如何调用/解析 lambda 数据（如果我什至正确设置了它）。提前感谢您的帮助！

【问题讨论】：

你在success方法里面得到data吗？可以放console.log(data)并刷新html页面
@AshishModi 似乎没有数据。但是有这个 Cross-Origin Request Blocked: The Same Origin Policy disallows read the remote resource at xxxxxxxxxx.execute-api.us-location-x.amazonaws.com/prod/…。（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。
试试这个 - docs.aws.amazon.com/apigateway/latest/developerguide/…

标签： html amazon-web-services amazon-s3 aws-lambda amazon-dynamodb

【解决方案1】：

出现cross-origin request blocked 错误是因为您尝试从不同的域（例如 www.example.com）访问 api。这是浏览器的一项安全功能，称为 CORS（跨源资源共享请求）。浏览器会向api发送pre-light请求，检查是否应该允许调用。

prelight 请求作为 http options 请求发送到 api 方法。

有两个步骤。

您需要为API网关、资源方法启用Cors。这样它将为资源启用Options 方法。简而言之，您需要选择特定资源，然后从操作中单击Enable Cors。

参考：请阅读https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html 的“在 REST API 资源上启用 CORS 支持”部分

你应该从你的 lambda 返回源头。

const docClient = new AWS.DynamoDB.DocumentClient({ region: 'us-location-x' });

exports.handler = async (event) => {
  let tableToRead = {
    TableName: 'dataStore',
    Limit: 10
  };

  const headers = {
    "Access-Control-Allow-Origin": '*'
    // other headers 
  }

  try {
    const data = docClient.scan(tableToRead).promise();
    return {
      statusCode: 200,
      body: JSON.stringify(data),
      headers: headers
    }
  } catch (error) {
    return {
      statusCode: 400,
      body: error.message,
      headers: headers
    }
  }
};

希望这会有所帮助。 @Ashish Modi，感谢分享链接。

【讨论】：

这行得通。我有一些新错误，但 CORS 问题已解决。感谢您的帮助
很高兴为您提供帮助
如何获取 JSON 的内容？直到我尝试获取它时才注意到，但现在正文是空的，它只是 { }，有什么想法吗？
那么数据为空。你能检查一下扫描吗
我会记录数据以查看其结构