AWS API gateway api CORS错误处理方法
我们开发了一个 AWS lambda 函数,然后我们使用 AWS API gateway服务将它上线。
我们已经测试 API 并验证它是否按照我们的预期工作,看起来真的很棒。
现在我们准备好将 API 端点发送到我们的前端并从网站调用它。
一旦我们这样做了,我们就发现了一些这样的 CORS 错误:
错误信息:
Access to XMLHttpRequest at ‘https://xxx.execute-api.us-east-1.amazonaws.com/prod/’ from origin ‘https://www.datasciencebyexample.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
CORS 错误代表跨域资源共享 (CORS) 错误。默认情况下,服务器端和 Web 端不能从不同的域通话。
所以我们需要从双方放宽这个要求。
在 AWS API 网关上启用 CORS
首先,在服务器端,我们需要确保来自服务器端的reaponser header,应具有包含“Access-Control-Allow-Origin”键的信息,以告知允许哪个domain调用 API。我们可以把特定的域值作为值,或者’*'代表所有站点都允许。请注意,此标头由 API 端提供,而不是从前端提供。
使用 AWS API 网关,可以在这里查看官方指南,
https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html,或者只需按照以下步骤操作:
通过 https://console.aws.amazon.com/apigateway 登录 API Gateway 控制台。
在 API Gateway 控制台中,在 APIs 下选择一个 API。
在资源下选择一个资源。这将为资源上的所有方法启用 CORS。或者,您可以在资源下选择一种方法来仅为该方法启用 CORS。
从操作下拉菜单中选择启用 CORS。
并选择启用 CORS在启用 CORS 表单中,不需要更改任何内容,只需使用默认建议即可,基本上它们是:
在 Access-Control-Allow-Headers 输入字段中,输入客户端在实际请求资源时必须提交的以逗号分隔的标头列表的静态字符串。使用控制台提供的 Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token 标头列表或指定您自己的标头。
使用控制台提供的 ‘*’ 值作为 Access-Control-Allow-Origin 标头值以允许来自所有域的访问请求,或者为来自指定域的所有访问请求指定一个命名域。
选择启用 CORS 并替换现有的 CORS 标头。
最后一点,记得重新部署API,否则可能不会生效。
这是上述步骤中描述的屏幕截图:
我们可以通过在 python 中使用 requests 库调用 API 来检查 CORS 设置是否有效,并从响应中打印出标头:
使用 javascript fetch 调用 API
在验证标头具有响应标头中的“Access-Control-Allow-Origin”键和值后,我们确定 CORS 已全部设置在服务器端。
在前端调用端点,我们不需要做太多的工作,只要找到你喜欢的方法。
下面是在 javascript 中使用 fetch 调用 POST 端点的示例:
function CORSexample(input) {// call api// POST request using fetch()fetch("https://xxx.execute-api.us-east-1.amazonaws.com/prod/", {method: "POST",// Adding body or contents to sendbody: JSON.stringify({"data":{"query":input}}),// Adding headers to the request if necessaryheaders: {"Content-type": "application/json; charset=UTF-8"}})// Converting result to JSON.then(response => response.json()).then(function(result){console.log(result)// in some oder jquery version, one has to parse the json to be object// it's not necessary in new versions, just try it or not//var result = $.parseJSON(result)// continue other custome stuff you have }}).catch(error => console.error('Error:', error)); }
英文链接
全栈程序员的最爱,AI好书必读
北大出版社,人工智能原理与实践 人工智能和数据科学从入门到精通 详解机器学习深度学习算法原理
人工智能原理与实践 全面涵盖人工智能和数据科学各个重要体系经典
AWS API gateway api CORS错误处理方法相关推荐
- API Gateway/API 网关(三) - Kong的使用 - 限流rate limiting(redis)
一.前言 Kong的限流支持三种方式,分别是本地限流(Local).数据库限流(Cluster)和Redis限流,这三种限流方式采用的限流算法都是计数器法.支持按照秒/分/小时/日/月/年等不同时间单 ...
- AWS Lambda 搭配 Amazon API Gateway (HTTP API)
AWS Lambda 搭配 Amazon API Gateway (HTTP API) AWS Lambda 是一种无伺服器.事件推动的运算服务,而 Amazon API Gateway 可以让开发人 ...
- AWS Lambda 搭配 Amazon API Gateway (REST API)
AWS Lambda 搭配 Amazon API Gateway (REST API) AWS Lambda 是一种无伺服器.事件推动的运算服务,而 Amazon API Gateway 可以让开发人 ...
- 使用 Learner Lab - 使用 S3 静态网页上传图片,搭配 API Gateway 与 Lambda
使用 Learner Lab - 使用 S3 静态网页上传图片,搭配 API Gateway 与 Lambda AWS Academy Learner Lab 是提供一个帐号让学生可以自行使用 AWS ...
- 聊聊 API Gateway 和 Netflix Zuul
转自:http://www.scienjus.com/api-gateway-and-netflix-zuul/?hmsr=toutiao.io&utm_medium=toutiao.io&a ...
- traefik gateway api
背景 在使用istio后开始考虑网关了,istio已经有自己的网关,为什么还要另外找一个别的网关,参考了好几个文章大致结论是,istio的网关功能不够强大,下图红色的部分是istio网关暂时缺失的,所 ...
- Day 30 - 实作 Amazon API GateWay 整合 AWS Lambda 与 Dynamodb
Day 30 - 实作 Amazon API GateWay 整合 AWS Lambda 与 Dynamodb Amazon API GateWay 简介 Amazon API Gateway 是由 ...
- 如何从Amazon API Gateway将查询字符串或路由参数传递到AWS Lambda
本文翻译自:How to pass a querystring or route parameter to AWS Lambda from Amazon API Gateway for instanc ...
- aws api gateway 设置WebSocket API集成请求
设置一个集成请求包括以下内容. 选择一个路由密钥来集成到后端. 指定要调用的后端端点,如AWS服务或HTTP端点. 通过指定一个或多个请求模板,配置如何将路由请求数据(如有必要)转换为集成请求数据. ...
最新文章
- 二项式反演[bzoj3622]已经没有什么好害怕的了
- 第八期:实操:两台路由器,如何分别通过WAN和LAN口连接?
- 关于ElasticSearch处理过滤条件
- 使用HIBERNATE的SQL查询并将结果集自动转换成POJO
- OpenShift 4 之AMQ Streams(4) - 用Prometheus监控Kafka
- 几个阿里,美团,腾讯大佬的公众号!超级变态!
- html5个人简历代码模板,个人简历HTML模板
- PAT-Basic Level-1001 害死人不偿命的(3n+1)猜想;
- Android网页字体缩放控件,Zoom Text Only插件下载-chrome网页字体缩放插件Zoom Text Only下载v1.5.4 官方版-西西软件下载...
- Android 音频源码分析——audioserver启动
- iphone浏览器显示服务器已停止响应,苹果手机自带浏览器停止响应请大家支招 - 卡饭网...
- 数据管理平台DMP细致研究——BlueKai
- 微信输出日志在电脑桌面
- ZLMediaKit源码分析 - NotifyCenter
- 深入浅出LDA(1)
- CodeGear宣布最新的C++Builder版本 : C++Builder 2007
- VST 2.0编程总结
- 【北邮国院大三上】电子商务法(e-commerce law)知识点整理——e-transaction_Part2_BUPTWeek8
- 重置目录服务还原模式(DSRM)密码
- 托管资源和非托管资源