Как извлечь данные из AWS Lambda и отобразить их на веб-сайте stati c, размещенном на AWS S3? - PullRequest
Новая
       9

Как извлечь данные из AWS Lambda и отобразить их на веб-сайте stati c, размещенном на AWS S3?

1 голос
/ 14 января 2020

Я пытаюсь использовать AWS DynamoDB, Lambda, API Gateway и S3 для создания простого веб-сайта. У DDB есть таблица, и в таблице есть одна запись. S3 имеет простой файл для HTML для веб-сайта. Цель состоит в том, чтобы отобразить запись, расположенную в DDB на веб-сайте, если я обновлю значение в DDB, то при обновлении веб-сайта следует изменить номер, чтобы отразить обновление в DDB. На данный момент у меня есть лямбда-функция, которая успешно извлекает запись из DDB. Я застрял в попытке сказать файлу HTML, чтобы он вызывал лямбда-функцию и возвращал данные (используя API Gateway). Я никогда раньше не работал с AWS, простите, если это даже не правильный подход для этой цели.

Ниже приведен код для лямбда-функции: 

'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);
       }
    });
};

И это HTML на S3: 

<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>

Когда я запускаю лямбда-функцию с помощью кнопки «test», она успешно извлекает данные из DDB. Но когда я пытаюсь запустить HTML, он говорит текст заголовка, но затем не добавляет значение из DDB. Я предполагаю, что я просто не понимаю, как вызвать / проанализировать лямбда-данные (если я даже настроил их правильно). Заранее спасибо за любую помощь!

1 Ответ

1 голос
/ 15 января 2020

Ошибка cross-origin request blocked возникает из-за того, что вы пытаетесь получить доступ к API из другого домена (например, www.example.com). Это функция безопасности браузеров, которая называется CORS (запросы на совместное использование ресурсов из разных источников). Браузер отправит запрос API pre-light, чтобы проверить, следует ли разрешить вызов.

Предварительный запрос отправляется как http options запрос к методу API.

Есть два шага.

  1. Необходимо включить Cors для шлюза API, метод ресурсов. Чтобы он включил метод Options для ресурса. Короче говоря, вам нужно выбрать конкретный ресурс и затем нажать Enable Cors из действий.

Ссылка: Пожалуйста, прочитайте раздел «Включить поддержку CORS для ресурса REST API» в https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Вы должны вернуть исходный заголовок из вашей лямбды. 

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
    }
  }
};

Надеюсь, это поможет. @ Ashi sh Моди, спасибо, что поделились ссылкой.

...