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 函数中获取身份对象?
我是不是需要在 Lambda 和 API 网关中验证 AWS Cognito 令牌?
如何将AWS API网关阶段指向特定的lambda函数别名?