来自本地 vue js 的 AWS 网关调用中没有 'Access-Control-Allow-Origin' header

Question

我正在使用直接集成到 s3 的 AWS API 网关将任何数据存储到 s3。 我已经在 S3 和 api 网关中启用了 CORS，如果我从邮递员或 curl 命令调用它工作正常，我可以看到我得到响应 header Access-Control-Allow-Origin 到 *.

但是当我从 vue js 本地机器调用时总是出现 CORS 错误

从源 'http://localhost:8080' 访问 'https://******/tests3/tryfinal44.txt' 处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin' header 出现在请求的资源上。

1 在 s3 中启用 CORS

 [
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

2 卷曲操作正常 curl -X PUT ****/onemore1221.txt -d “测试 api” -i

3 Vue js调用代码-

 const article =  "Vue POST Request Example" ;
             const headers = {
                "Content-Type":'text/plain'
            };
            axios.put("**/tests3/tryfinal44.txt", article, { headers })
                .then((response) => {
                console.log(response)
                     })
                .catch(error => {
                    this.errorMessage = error.message;
                    console.error("There was an error!", error);
                    });

4 API 设置 我试过 ajax，ajax 也有同样的问题。 任何建议都将得到帮助。

谢谢 迪利普

Answer 1

您好，在与 aws 支持人员讨论后，我们能够解决这个问题，因为问题不在于 cors。 实际问题是预检请求给出了 500。有这个错误

error Execution failed due to configuration error: Unable to transform request

我们发现 api 设置 / 中的二进制媒体导致了我的问题，我已更改为 image/png 并开始工作。 感谢大家的帮助。