Question

只需要一个如何从浏览器中运行的JavaScript调用AWS Lambda并在JavaScript控制台中显示函数结果的示例。令人难以置信的是，我在Google或AWS文档中找不到任何示例。

我的用例是我有一个HTML表单。提交表单时，我想使用Lambda来处理表单输入。假设Lambda函数完成且没有错误，那么我想让用户到感谢页面。

请提供完整的HTML示例，而不仅仅是代码段。

Answer 1

由于您需要从浏览器运行Lambda，因此您可以通过两种方式实现它。

使用AWS Javascript SDK，通过静态配置向用户设置，或Cognito与IAM Permissions设置Lambda。您还可以考虑将Lambda个功能订阅到SNS Topic，然后通过向主题发送消息来运行Lambda。此SNS方法还要求您通过单独调用来存储和检索提交状态。
使用AWS API Gateway创建具有适当CORS配置的RESTful端点，您可以使用AJAX从浏览器ping。

这两种选择各有利弊。有关您的用例的更多信息对于正确评估哪一个最适合您是必要的。

Answer 2

我发现人们已经使用AWS SDK for Javascript但是并不需要特别要求，因为您需要为未经身份验证的身份创建启用访问权限的Amazon Cognito身份池（对于像我这样的初学者来说是Atleast）。下面的代码对我来说很好 -

<html>
    <head>
<script>
    function callAwsLambdaFunction() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("myDiv").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "https://test123.ap-south-1.amazonaws.com/dev", true);
        xhttp.send();

    }
    </script>   
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <h1>Click below button to call API gatway and display result below!</h1>
        <h1><div id="myDiv"></div></h1>
        <button onclick="callAwsLambdaFunction()">Click me!</button><br>
        Regards,<br/>
        Aniket
    </body>
</html>

上面是我添加到S3存储桶并创建静态网站的示例index.html。几点要注意 -

如果您使用S3进行静态站点托管，请从外部打开index.html。
如果您的网站域与API网关域不同，请确保为您的API网关启用CORS。否则你可能会 -

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://test123.ap-south-1.amazonaws.com/dev. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Answer 3

对于2017年之后看到此内容的人，您可以查看AWS Amplify API class。示例代码取自Amplify API文档。

请注意 1）您必须使用POST方法来调用lambda函数 2）确保添加策略以调用未经身份验证（如果需要）和经过身份验证的角色的lambda权限。
3）如果授予了权限策略，用户不需要登录来调用lambda。

import Amplify, { API } from 'aws-amplify';

Amplify.configure({
    Auth: {
    // REQUIRED - Amazon Cognito Identity Pool ID
        identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
    // REQUIRED - Amazon Cognito Region
        region: 'XX-XXXX-X', 
    // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: 'XX-XXXX-X_abcd1234', 
    // OPTIONAL - Amazon Cognito Web Client ID
        userPoolWebClientId: 'XX-XXXX-X_abcd1234',
    },
    API: {
        endpoints: [ 
            {
                name: "MyCustomLambdaApi",
                endpoint: "https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/yourFuncName/invocations",
                service: "lambda",
                region: "us-east-1"
            }
        ]
    }
});

这就是你调用lambda函数的方法

let apiName = 'MyApiName'; // replace this with your api name.
let path = '/path'; //replace this with the path you have configured on your API
let myInit = {
    body: {}, // replace this with attributes you need
    headers: {} // OPTIONAL
}

API.post(apiName, path, myInit).then(response => {
    // Add your code here
});

Answer 4

我会在步骤

下面使用AWS SDK for Javascript

引用js文件

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.100.0.min.js"></script>
初始化/配置SDK

AWS.config.update({region: 'REGION'}); AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'IdentityPool'});
创建服务lambda Object，依此类推......

您可以在此链接中看到后续步骤

http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/browser-invoke-lambda-function-example.html

需要从JavaScript调用AWS Lambda的示例

4 个答案: