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

Question

我正在尝试使用 AWS DynamoDB、Lambda、API Gateway 和 S3 创建一个简单的网站。 DDB 有一个表，表中只有一个条目。 S3 有一个简单的网站 HTML 文件。 目标是在网站中显示位于 DDB 中的条目，如果我更新 DDB 中的值，则刷新网站应该更改数字以反映 DDB 中的更新。 目前，我有一个 lambda 函数，它成功地从 DDB 检索条目。 我一直在试图告诉 HTML 文件调用 lambda 函数并取回数据（使用 API 网关）。 我以前从未与 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 数据（如果我什至正确设置了它）。 在此先感谢您的帮助！

Answer 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，感谢分享链接。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-01-14 23:04:18

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-01-14 23:04:18

解决方案1
2 已采纳 2020-01-14 23:04:18