首先

我平常使用TypeScript在前端编写，而在后端则使用Ruby或Node.js编写Lambda函数。然而，我最近想在后端也用TypeScript编写代码！所以，我尝试使用sls create -t aws-nodejs-typescript创建了一个TypeScript环境。以下是我在遇到CORS错误时的记录。

前提的中文翻译选项：先决条件

• ServerlessFramework

Framework Core: 3.27.0 (local) 3.27.0 (global)
Plugin: 6.2.3
SDK: 4.3.2

typescript

Version 4.9.5

ts-node -v

v10.9.1

建造过程

1. 使用模板创建

1. $ sls create -t aws-nodejs-typescript -p hoge

可以省略-p（如果不存在，使用当前目录）

部署
$ sls deploy

当无事部署完成时

Deploying hoge to stage dev (us-east-1)

✔ Service deployed to stack hoge-dev (124s)

endpoint: POST - https://hogehoge.execute-api.us-east-1.amazonaws.com/dev/hello
functions:
  hello: hoge-dev-hello (12 kB)

应该显示类似的端点。

试试用POSTMAN或VScode的扩展功能ThunderClinet发送POST请求到显示的终端。

method: "POST"
Headers: { Content-type: application/json }
Body: { "name": "hoge" }

然后，。。。 ,…)

我得到了一条来自Hello hoge的消息！

API 网关 + Lambda 架构已经建立了！

事情发生

接下来，我尝试使用JavaScript中的fetch方法通过网站发送了一个POST请求。

发生CORS错误。

处理

在./src/libs/api-gateway.ts中的响应生成部分添加Access-Control-Allow-Origin的设置。

export const formatJSONResponse = (response: Record<string, unknown>) => {
  return {
    statusCode: 200,
    headers: {                              // 追加
      'Access-Control-Allow-Origin': '*',   // 追加
    },                                      // 追加
    body: JSON.stringify(response)
  }
}