Question

我试图调用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”。

Answer 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上提到的步骤来完成。

对API GATEWAY的XMLHttpRequest无法正常工作

1 个答案: