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

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

转载作者：行者123 更新时间：2023-12-04 10:45:11

25

4

我正在尝试使用 AWS DynamoDB、Lambda、API Gateway 和 S3 创建一个简单的网站。 DDB 有一个表，表中只有一个条目。 S3 有一个简单的网站 HTML 文件。目标是在网站中显示位于 DDB 中的条目，如果我更新 DDB 中的值，则刷新网站应该更改数字以反射(reflect) 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 数据(如果我什至正确设置了它)。
在此先感谢您的帮助!

最佳答案

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

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

有两个步骤。

您需要启用 Cors到 API 网关，资源方法。这样它将启用 Options资源的方法。简而言之，您需要选择特定资源，然后单击 Enable Cors从行动。

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

您应该从 lambda 返回原始 header 。

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

关于html - 如何从 AWS Lambda 检索数据并将其显示在托管在 AWS S3 上的静态网站上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59738411/

25

4

0

文章推荐： google-bigquery - 具有 ARRAY_CONCAT 和 Struct 的不同键

文章推荐： python-3.x - 计算 Pandas 数据框上的滚动坡度

文章推荐： Javascript:如何打印包括回车在内的字符串的原始内容？

文章推荐： xcode - Mac iCloud 改变了 Xcode Pods 破坏了我的构建

c++ - 静态 __forceinline 或 __forceinline 静态
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 5 年前。 Improve
C# 静态 "this"
在 C# 静态方法中是否有一种方法可以引用定义该方法的类型？在实例方法中，您可以通过以下方式确定类型: public void Foo() { Type type = this.GetTyp
WPF:静态、动态资源以及资源词典
WPF:静态、动态资源以及资源词典静态资源与动态资源我们常常会使用样式或者控件模板放在Window.Resources中，比如这样：静态资源与动态资源使用如下： <Window
.net - 静态/共享功能中的LoadControl
任何人都知道如何在共享/静态函数中动态加载控件？该函数本身位于 mustinherit/abstract 类中。 (这是 VB 中的 ASP.NET 项目)我想做这样的事情: VB: Publ
refactoring - 静态/强类型和重构
在我看来，静态/强类型编程语言最宝贵的一点是它有助于重构:如果/当您更改任何 API，那么编译器会告诉您该更改破坏了什么。我可以想象用运行时/弱类型语言编写代码......但我无法想象没有编译器的帮
java - 无参数方法/静态
正如我的名字所暗示的，我是一名 .NET 开发人员，但我对 Java 的兴趣越来越大，并且我有兴趣学习更多其他语言，因为这有助于我学习更多关于编程的知识。无论如何，我的问题是:不带参数/不使用状态的
静态 Json 文件的响应模板
我在java中使用WireMock来 stub POST请求。该请求返回一个存储在我本地的 json 正文文件。 stub 看起来像这样: wireMockServer.stubFor(get(url
Python 类构造函数(静态)
Python 是否有类构造函数的机制，即每当首次引用类时(而不是创建该对象的实例时)调用的函数？我知道其他一些语言中也存在这种情况，但我还没有在 Python 中遇到过。基本上，我想初始化该函数中的
Python 类构造函数(静态)
Python 是否有类构造函数的机制，即每当首次引用类时(而不是创建该对象的实例时)调用的函数？我知道其他一些语言中也存在这种情况，但我还没有在 Python 中遇到过。基本上，我想初始化该函数中的
java - 静态/编译时多态性
这个问题已经有答案了: What is the difference between dynamic and static polymorphism in Java? (14 个回答) 已关闭 4 年
Java 静态 - 方法或字段？
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Static initializer in Java 我想知道这个静态的东西(抱歉，这是我第一次遇到这个)对一个类有
c++ - 静态/动态链接的静态初始化顺序问题
如果c++应用程序是按以下方式组织的 //file1.cpp static Y sgObj = X::getInitObject(0); //declared in file scope //fil
java - 静态/抽象冲突
我有一个抽象类(AvergedDataRecord)，我需要进一步抽象(DataRecord)，这样我就可以将它扩展到原始类和一个新的具体类(SummedDataRecord)，并且我在获取某些方法时
c# - 静态 IEnumerable？
我正在尝试制作一个字符串枚举。这是我到目前为止所得到的， private class TypedEnum : IEnumerable { public IEnumerator GetEnume
c - 静态/动态源代码分析
我选修了一门名为“安全代码”的类(class)，在下一个作业中，我们应该对一些 C 文件和 JavaEE Web 项目进行静态/动态分析。我检查了“源监视器”并在 C 文件上运行它，但是(除非我不知
java - 类之间的共享首选项(静态)？
我有两个类，一个是登录类，一个是用户类。在 loggedIn 类中，我想显示我在用户登录时所做的共享首选项。 loginPrefs = getSharedPreferences("loginprefe
android - 静态 fragment
我在同一个 Activity 中有两个静态 fragment ，在“fragmentA”中我有一个自定义列表，当一个项目被点击时必须在“fragmentB”中出现一个细节，细节只在我改变屏幕方向时出现
Java 静态/实例方法优化
在 Java 中是未修改方法变量，缺少final，每次都重新初始化限定符静态方法实例方法如果 1. 或 2.(或两者)的答案是 final 限定符允许 Java 执行优化并存储方法变量只有一次？
java - 静态-非静态交互
我有两个类相互交互。第一个是中心的，如下: public class Datenbank { double winkelPanel = 0; double groessePanel = 0; doub
静态 mysql 加密
我有一个 mysql 数据库，它连接基于 Web 的 php 应用程序和 FoxPro 应用程序(是的，foxpro)。在之前的“开发人员”被解雇后开始处理这个问题。无论如何，我熟悉 AES_Enc

首页

博学

6Ren·AI

商城

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