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

最新推荐文章于 2024-05-07 14:33:02 发布

Yehchitsai

最新推荐文章于 2024-05-07 14:33:02 发布

阅读量344

点赞数

本文链接：https://blog.csdn.net/m0_50614038/article/details/124392915

版权

AWS 同时被 3 个专栏收录

49 篇文章 0 订阅

订阅专栏

AWS Lambda

4 篇文章 0 订阅

订阅专栏

API Gateway

4 篇文章 1 订阅

订阅专栏

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

跨原始资源共用 (CORS) 需要从不在相同网域托管的网页叫用 Web API。以下展示如何建立一个使用跨原始资源共用 CORS 的 Amazon API Gateway 使用 REST 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 类型： REST API
安全性：开启
其他设置
API 名称： lambda2api-RestAPI
部署阶段： default

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

Lambda 会增加 Amazon API Gateway 的必要权限，以便用这个触发条件叫用您的 Lambda 函式。这点可以透过检视 IAM 来观察增加的权限。

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

在这里插入图片描述

新增 API Gateway 触发条件配置

步骤 4. 修改程式码

修改 Lambda 程式码以便于后续观察 API Gateway 是如何传递 HTTP 的请求，以下代码会根据 GET/POST 的请求，做个别的显示，修改完程式码后记得单击 Deploy 按钮，这才会把这代码布署到云端，如下图所示。

import json

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

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

在这里插入图片描述

修改 Lambda 程式码

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

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

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

下图显示呼叫 API Gateway 的结果，因为使用者的请求为 GET ，因为没传入数据，所以显示 null。

在这里插入图片描述
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://tak5musbz9.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">送出问候
			</div>
		</form>
		<h1>使用 POST 方法</h1>
		<form action="https://tak5musbz9.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">送出问候
			</div>
		</form>
	</body>
</html>

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

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

步骤 7. 检验 CORS 请求

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

Request URL: https://tak5musbz9.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 方法 表单中的提交按钮，观察上方的网页内容是回传整个 event 参数，可以发现因为我们是用表单方式传送数据给 API Gateway，所以 [“headers”][“content-type”] 的内容是 “application/x-www-form-urlencoded”，而非 AWS Lambda 搭配 Amazon API Gateway (REST API) 这篇文章所用的 “application/json”，而后面的 [“body”] 字段并不会使用 base64 进行编码，但是使用 HTTP API类型会编码，可以参考使用跨原始资源共用 CORS 的 Amazon API Gateway (HTTP API) 这篇文章，结果如下图所示。

在这里插入图片描述
处理 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
使用跨原始资源共用 CORS 的 Amazon API Gateway (HTTP API)，https://blog.csdn.net/m0_50614038/article/details/124392101

Yehchitsai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用跨原始资源共用 CORS 的 Amazon API Gateway (REST API)

使用跨原始资源共用 CORS 的 Amazon API Gateway (REST API)跨原始资源共用 (CORS) 需要从不在相同网域托管的网页叫用 Web API。以下展示如何建立一个使用跨原始资源共用 CORS 的 Amazon API Gateway 使用 REST API。步骤 1. 进入 AWS Lambda 控制台登录 AWS 控制台画面后选择进入 AWS Lambda 控制台，单击左边功能导览列中的函式，会进入函式画面，注意所在区域，本范例以东京区域为例，如下图所示，单击建立函式按
复制链接

扫一扫