Question

我正在尝试使用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数据（如果我已经正确设置的话）。预先感谢您的帮助！

Answer 1

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

预发光请求作为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 个答案: