我试图调用API Gateway,以使用XMLHttpRequest显示它返回的JSON。我的网页托管在AWS S3上。当我尝试时出现以下错误-
无法加载{API的URL}:请求标头字段 不允许访问控制允许来源 飞行前响应中的Access-Control-Allow-Header。
请求的代码是-
var config = {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Methods": "DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT",
"Access-Control-Allow-Headers": "Content-Type,Authorization,X-Amz-Date,X-Api-Key,X-Amz-Security-Token"
}
}
axios.get(API_URL,config)
.then(function (response) {
console.log(response);
})
我在Amazon s3中设置的CORS是
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://s3.ap-south-1.amazonaws.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
详细信息- 托管在AWS S3上的网页 向AWS API网关发送请求
背景-
在stackoverflow上检查了此this和this,但这无助于我解决问题。
编辑:
如上所述,我尝试从axios调用中删除配置。 我收到错误消息
所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此,不允许访问来源“ https://s3.ap-south-1.amazonaws.com”。
答案 0 :(得分:1)
这种方法对我有用
我使用的代码:-
axios.get(API_URL)
.then(function (response) {
console.log(response);
})
用于AXIOS的CDN-
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
然后我必须在API GATEWAY中启用响应标头,而我却没有。
可以使用@ Michael-sqlbot在注释中提到的here或Official AWS Website上提到的步骤来完成。