React.js - CORS 策略：请求的资源上不存在“Access-Control-Allow-Origin”标头。[AWS - Lambda - API 网关]

Question

我有一个反应客户端应用程序，它将表单数据发送到AWS API Gateway. 当我测试 API 时Postman一切正常，但是当我Axios在 React 中使用时，控制台中会显示错误：

Access to XMLHttpRequest at 'https://execute-api.eu-west-3.amazonaws.com' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我在API网关方法中启用了CORS，我也AWS Lambda function启用了Lambda proxy integrationCORS，但显然它没有解决问题。

我怎样才能解决这个问题 ？提前致谢。

- - - 更新 - - - -

根据评论，这是我从以下位置发送的响应的构建函数Lambda function：

const buildResponse = (statusCode, body) => {
return {
    statusCode : statusCode,
    headers : {
        "Content-Type" : "application/json",
        "Access-Control-Allow-Headers" : "Content-Type",
        "Access-Control-Allow-Origin": "*",
    },
    body : JSON.stringify(body)
}
}

我打电话的地方：

const get = async () => {
const params = {
  TableName: dynamoTable
}
const all= await scanDynamoRecords(params, []);
const body = {
  data: all
}
return buildResponse(200, body);
}

Answer 1

在阅读CORS并咨询专业人士后，必须将响应标头更新为以下内容才能解决问题：

headers : {
        "Access-Control-Allow-Headers": "*",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "*"      
    }

当然，CORS必须在 API Gateway 上为使用的每种方法启用。