“不存在访问控制标头”-通过 API 调用 AWS lambda 函数时

Question

我在 python 中创建了一个 Lambda 函数，在这个函数中我放置了带有跨源详细信息的标题。这是我的 Lambda 函数的代码：

def lambda_handler(event, context):    
    data=''
    s3_boto = boto3.client('s3')
    s3 = boto3.resource('s3')
    reference_elements = event['data1']
    test_elements = event['data2']
    try:
        #access first event object
        imagePath = []        
        data= compute_data(reference_elements, test_elements)
        return response({'message': data}, 200)      

    except Exception as e:
        return e
    return response({'message': data}, 200)

def response(message, status_code):
     return {
        'statusCode': str(status_code),
        'body': json.dumps(message),
        'headers': {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
            },
        }

现在我已经使用 POST 方法创建了一个 AWS API 网关并启用了 CORS。然后我部署了这个 API。 当我从 Postman 运行这个 API 时，它工作正常。 但是一旦我尝试从我的 React JS 代码中获取这个 API，它就会抛出以下错误： enter image description here

这是我在按钮点击中的 React Js 代码：

let postData = {"key1":"value1","key2":"value2","key3":"value3"}
const requestOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Headers": "*"
      },
      body: JSON.stringify(postData)
    }
    const url =
      "https://apiId.execute-api.us-east-1.amazonaws.com/apiFunctionName"
    fetch(url, requestOptions)
      .then(response => console.log(response))
      .then(data => console.log(data))

请纠正我哪里出错了，我已经投入了大量时间进行反复试验，但没有运气。

Answer 1

浏览器在调用跨域之前，使用OPTIONS 方法发出preflight 请求。在您的网络选项卡中，您应该会看到一个OPTIONS 呼叫，在您的情况下，ApiGateway 是不允许的。类似于您在网关上允许的POST 方法，允许OPTIONS 调用。根据您要允许的域，返回带有 200 和 CORS 标头的 OPTIONS 调用。