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

Posted 2023-03-04

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

【英文标题】：React.js - CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. [AWS - Lambda - API GATEWAY]

【发布时间】：2021-09-09 17:39:41

【问题描述】：

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

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 Gateway 方法中启用了 CORS，我的 AWS Lambda function 也有 Lambda proxy integration，但显然它没有解决问题。

我该如何解决这个问题？提前致谢。

----- 更新 -------

基于 cmets，这是我从 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);

【问题讨论】：

您允许哪些来源？

@StefanN 我允许所有来源："*"

太棒了！可以给我看一下代码吗？

@StefanN 问题已更新，先生，谢谢。

检查您的 API 网关是否正在转发访问控制标头？客户端根据报错信息没有收到

【参考方案1】：

尝试像这样为 axios 启用凭据：

axios.defaults.withCredentials = true;

【参考方案2】：

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

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

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