AWS Lambda + 网关 API + React JS

Posted

技术标签:

【中文标题】AWS Lambda + 网关 API + React JS【英文标题】:AWS Lambda + Gateway API + React JS 【发布时间】:2020-10-07 22:03:34 【问题描述】:

我正在尝试使用 react 发布到我的 dynamoDB,但是我收到以下错误:

Access to fetch at 'https://xxxxx.execute-api.us-west-2.amazonaws.com/prod/getuserprofile' from 
origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. If an opaque response serves your needs, set the 
request's mode to 'no-cors' to fetch the resource with CORS disabled.

首先,我使用 Lambda 测试检查了此方法是否有效。

我也用过curl -v -X OPTIONS https://xxxx.execute-api.us-west-2.amazonaws.com/prod/getuserprofile,它的输出是:

`< HTTP/2 200
< date: 
< content-type: application/json
< content-length: 0
< x-amzn-requestid:
< access-control-allow-origin: *
< access-control-allow-headers: Content-Type,Authorization,X-Amz-Date,X-Api-Key,X-Amz-Security-Token
< x-amz-apigw-id:
< access-control-allow-methods: DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT`

但是,当我尝试 react.js fetch 函数时,它会抛出错误。

fetch("https://xxxx.execute-api.us-west-2.amazonaws.com/prod/getuserprofile", 
  method: 'PUT',
  headers: 
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  ,      
  body: JSON.stringify(key1: email, name, message)
  )
  .then(response => response.json())
  .then(data => 
    console.log('Success:', data);
  )
  .catch((error) => 
    console.error('Error:', error);
);

我尝试在 fetch 函数中添加“模式”,但无济于事。 任何调试建议也会有帮助。谢谢。

【问题讨论】:

【参考方案1】:

如果有人想知道我的问题的答案: 这是因为您必须重新部署才能使 CORS 生效。

所以:

    转到您的 API。

    在左侧菜单栏上转到资源。

    点击您的资源

    点击操作栏 > 启用 CORS

    阶段 > 部署

【讨论】:

【参考方案2】:

跨域资源共享 (CORS) 是一种机制,它使用额外的 HTTP 标头告诉浏览器让在一个来源运行的 Web 应用程序可以访问来自不同来源的选定资源。当 Web 应用程序请求的资源与其自己的来源(域、协议或端口)不同时,它会执行跨域 HTTP 请求。

以下是 CORS 的 AWS 文档。

https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

【讨论】:

在我的 lambda node.js 函数中,我确实有这个 CORS 策略:callback(null, statusCode: 201, body: JSON.stringify( email: params.Item.email, message: params. Item.message,用户名:params.Item.name,),标题: 'Access-Control-Allow-Origin': '*',

以上是关于AWS Lambda + 网关 API + React JS的主要内容,如果未能解决你的问题,请参考以下文章

AWS Lambda、API 网关和 Cognito:如何在 lambda 函数中获取身份对象?

AWS Lambda 网关 API 给出错误消息

我是不是需要在 Lambda 和 API 网关中验证 AWS Cognito 令牌?

如何将AWS API网关阶段指向特定的lambda函数别名?

使用 Lambda 授权方的 AWS Cognito 和 API 网关

AWS Lambda + 网关 API + React JS