使用跨原始资源共用 CORS 的 Amazon API Gateway (HTTP API)

跨原始资源共用 (CORS) 需要从不在相同网域托管的网页叫用 Web API。以下展示如何建立一个使用跨原始资源共用 CORS 的 Amazon API Gateway 使用 HTTP API。

步骤 1. 进入 AWS Lambda 控制台

在这里插入图片描述

AWS Lambda 函式控制台画面

步骤 2. 建立 Lambda 函式

在建立函式画面中，设定如下：

选择下列选项之一来建立您的函式： 从头开始撰写
函式名称： lambda2api
执行时间： Python 3.7
架构： x86_64

配置完毕后单击右下方的建立函式即可，如下图所示。

在这里插入图片描述

建立 Lambda 函式配置

步骤 3. 新增触发条件

进入 Lambda 函式的编辑画面后，首先先单击 ＋新增触发 按钮，用来指定 API Gateway 触发这个 Lambda 函式，配置选项如下：

触发组态： API Gateway
API： 建立 API
API 类型： HTTP API
安全性：开启
其他设置
API 名称： lambda2api-API
部署阶段： default
跨原始资源共用 (CORS)：勾选

将 API Gateway 新增至 Lambda 函数，以建立可叫用函数的 HTTP 端点，而 API Gateway支援两种类型的 RESTful API︰HTTP API 和 REST API。HTTP API 是轻量级、低延迟的 RESTful API，较新推出并内建于 API Gateway version 2 API；REST API 是可以高度客制化的 RESTful API。

勾选跨原始资源共用 (CORS) 选项可在所有回应中新增 Access-Control-Allow-Origin 标头，以启用任何网域的跨原始资源共用 (CORS)。此外，Lambda 会增加 Amazon API Gateway 的必要权限，以便用这个触发条件叫用您的 Lambda 函式。这点可以透过检视 IAM 来观察增加的权限。

配置完毕后单击新增按钮，如下图所示。

在这里插入图片描述
新增 API Gateway 触发条件配置

步骤 4. 修改程式码

修改 Lambda 程式码以便于后续观察 API Gateway 是如何传递 HTTP 的请求，所以以下代码将传入参数 event 显示出来，修改完程式码后记得单击 Deploy 按钮，这才会把这代码布署到云端，如下图所示。

import json

def lambda_handler(event, context):
    # TODO implement
    return {
        'statusCode': 200,
        'body': json.dumps(event, indent=4, default=str)
    }

在这里插入图片描述

修改 Lambda 程式码

步骤 5. 透过 API Gateway 触发 Lambda 函式

单击上图的 API Gateway 或是组态页签后选择触发功能画面，会看到步骤 3 所建立的 API Gateway端点，单击 API 终端节点 就可以透过 API Gateway 触发 Lambda 函式，如下图所示。

在这里插入图片描述
API 终端节点触发 Lambda 函式

下图显示呼叫 API Gateway 的结果，因为使用者的请求为 GET ，可以在 [“requestContext”][“http”]这个键值中找到使用者的请求内容。

在这里插入图片描述
Lambda 函式运行结果

步骤 6. 建立本地端的网页调用 API Gateway

因为 RESTful API 通常都是透过程式调用，以下我们撰写一个本地端的 HTML 网页透过 API Gateway 以 get 与 post 方法来传资料给后端的 Lambda 函式，观察在 API Gateway 后方的Lambda 函式，会接收到怎样的请求格式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>API Gateway CORS test</title>
	</head>
	<body>
		<h1>使用 get 方法</h1>
		<form action="https://j98fukyxs3.execute-api.ap-northeast-1.amazonaws.com/default/lambda2api" method="GET">
			<div>
				<label for="say">问候</label>
				<input name="say" id="say" value="节日快乐">
			</div>
			<div>
				<label for="to">要问候谁?</label>
				<input name="to" id="to" value="母亲">
			</div>
			<div>
				<input type="submit">送出问候</input>
			</div>
		</form>
		<h1>使用 POST 方法</h1>
		<form action="https://j98fukyxs3.execute-api.ap-northeast-1.amazonaws.com/default/lambda2api" method="POST">
			<div>
				<label for="say">问候</label>
				<input name="say" id="say" value="假日快乐">
			</div>
			<div>
				<label for="to">要问候谁?</label>
				<input name="to" id="to" value="父亲">
			</div>
			<div>
				<input type="submit">送出问候</input>
			</div>
		</form>
	</body>
</html>

使用浏览器打开，画面如下图。

在这里插入图片描述
本地端使用 GET/POST 请求的网页

步骤 7. 修改 Lambda 函式

因为 Lambda 函式会接收到前端网页所传递过来的 http 请求，所以我们将原来的程式码改成可以接收 GET/POST 请求的代码。

import json

def lambda_handler(event, context): 
    requestMethod = event['requestContext']['http']['method']
    if requestMethod=='GET':
        result = event['queryStringParameters']
    else:
        result = event

    return {
        'statusCode': 200,
        'body': json.dumps(result, indent=4, default=str, ensure_ascii=False)
    }

修改完记得单击 Deploy 按钮，结果如下所示。

在这里插入图片描述
修改 Lambda 函式可接收 GET/POST 请求

步骤 8. 检验 CORS 请求

使用 Chrome 浏览器，打开步骤 6 的本地网页，并打开开发者工具，接著单击 使用 get 方法 表单中的提交按钮，观察下方开发者工具中的 Headers 页签，可以发现传送过去的中文会被转换成 UTF-8 的 16 进制编码，而 Remote Address 这个标头说明请求是由本地端发出，结果如下图所示。

Request URL: https://j98fukyxs3.execute-api.ap-northeast-1.amazonaws.com/default/lambda2api?say=%E8%8A%82%E6%97%A5%E5%BF%AB%E4%B9%90&to=%E6%AF%8D%E4%BA%B2
Request Method: GET
Status Code: 200 
Remote Address: 127.0.0.1:9090
Referrer Policy: strict-origin-when-cross-origin

在这里插入图片描述
处理 GET 请求的结果

使用 Chrome 浏览器，打开步骤 6 的本地网页，并打开开发者工具，接著单击 使用 POST 方法 表单中的提交按钮，观察下方开发者工具中的 Payload 页签，可以发现传送过去的表单信息，而上方的网页内容是回传整个 event 参数，可以发现因为我们是用表单方式传送数据给 API Gateway，所以 [“content-type”] 的内容是 “application/x-www-form-urlencoded”，而非 AWS Lambda 搭配 Amazon API Gateway (HTTP API) 这篇文章所用的 “application/json”，这导致后面的 [“body”] 字段会使用 base64 进行编码，结果如下图所示。

在这里插入图片描述
处理 POST 请求的结果

参考资料

AWS Lambda, https://aws.amazon.com/lambda/
What is AWS Lambda?, https://docs.aws.amazon.com/lambda/latest/dg/welcome.html
Choosing an API type, https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway.html?icmpid=docs_lambda_console#services-apigateway-apitypes
json — JSON encoder and decoder, https://docs.python.org/3/library/json.html
Amazon API Gateway, https://aws.amazon.com/api-gateway/
AWS Lambda 搭配 Amazon API Gateway (HTTP API)， https://blog.csdn.net/m0_50614038/article/details/124377796
AWS Lambda 搭配 Amazon API Gateway (REST API), https://blog.csdn.net/m0_50614038/article/details/124384045