reactjs - 尝试使用 Node.js Lambda 函数在 AWS REST API 配置上通过 Axios 发布数据时出现 CORS 错误

Question

我正在 React 前端中使用 axios 将数据发布到 DynamoDB 表。 API 是通过 AWS 上的 API 网关和 Lambda 通过无服务器配置设置的。

虽然请求通过并且我在数据库上看到了添加的项目，但我仍然收到 CORS 错误 /image/m7yMG.jpg

这是axios方法:

import axios from "axios";

export const sendItemToDB = async (_data) => {
    if (!_data) { return };
    try {
        const res = await axios({
            method: "POST",
            url: process.env.REACT_APP_QUERY_API,
            data: _data,
            headers: {
                "Content-Type": "text/plain"
            },
        });
        console.log("data returned from api", res);
    } catch (error) {
        console.log("Error sending File to db: ");
        console.log(error);
    }
};

以及 Lambda 上的 API 方法:

const createRecord = async (event) => {
    const response = { statusCode: 200 };

    try {
        const body = JSON.parse(event.body);
        const params = {
            TableName: process.env.DYNAMODB_TABLE_NAME,
            Item: marshall(body || {}),
        };
        const createResult = await db.send(new PutItemCommand(params));
        response.body = JSON.stringify({
            message: "Successfully created record.",
            createResult,
        });
    } catch (e) {
        console.error(e);
        response.statusCode = 500;
        response.body = JSON.stringify({
            message: "Failed to create record.",
            errorMsg: e.message,
            errorStack: e.stack,
        });
    }

    return response;
};

我根据本教程进行了此配置:https://github.com/jacksonyuan-yt/dynamodb-crud-api-gateway

Answer 1

我解决了以下亚马逊文档并重新配置无服务部署 yml。
有关 API 网关和 lambda 代理集成的无服务器文档 here

将缺少的 header 添加到所有 lambda 函数中至关重要。

const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
    };

还测试 OPTIONS 是否适用于预检: https://docs.aws.amazon.com/apigateway/latest/developerguide/apigateway-test-cors.html