对API GATEWAY的XMLHttpRequest无法正常工作

时间:2019-01-16 06:55:32

标签: javascript amazon-web-services amazon-s3 cors aws-api-gateway

我试图调用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上检查了此thisthis,但这无助于我解决问题。

编辑:

如上所述,我尝试从axios调用中删除配置。 我收到错误消息

  

所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此,不允许访问来源“ https://s3.ap-south-1.amazonaws.com”。

1 个答案:

答案 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在注释中提到的hereOfficial AWS Website上提到的步骤来完成。