为啥从远程 AWS S3 服务器下载 json 文件时 axios GET 错误

Posted 2023-02-22

【中文标题】为啥从远程 AWS S3 服务器下载 json 文件时 axios GET 错误

【英文标题】：Why axios GET error when downloading json file from remote AWS S3 server为什么从远程 AWS S3 服务器下载 json 文件时 axios GET 错误

【发布时间】：2020-05-04 19:37:15

【问题描述】：

在 React 应用程序中，我尝试使用以下代码从 AWS S3 下载 .json 文件：

componentDidMount() 

    axios.get(`https://amplify-NotRealUrl-dev-333333-deployment.s3.us-east-2.amazonaws.com/rulesSummaryData2.json`)
      .then(response => 
        console.log("SUCCESS", response);
      , error => 
        console.log("ERROR", error);
      );

在浏览器控制台窗口中，我看到此错误：

ERROR 错误：网络错误 在 createError (createError.js:16) 在 XMLHttpRequest.handleError (xhr.js:83)

JSON 文件对公众开放，没有权限，我可以将 url 放入浏览器并下载而无需身份验证。另外，我可以在 Postman 中成功执行 GET。另外，我插入了一个开放的 api GET url，而不是 .json，但它确实返回成功。 .json 似乎有问题。但是，我看到许多链接显示与 .json 类似的功能。我错过了一些东西！

附加信息（更新）： 无论我使用什么 URL，都会发生此错误。例如，如果我使用 axios.get(https://ThisIsNotAValidURLThisIsNotAValidURLThisIsNotAValidURLThisIsNotAValidUR.json)

我仍然得到完全相同的错误。此外，我使用了另一个基础 React 应用程序，以确保这个项目不是原因，相同的结果。

【问题讨论】：

您是否尝试过添加这些标题？ 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json'

crossdomain: true , headers: "Content-Type": "application/json" 为我工作。您需要指定的资源管理器正在请求 API JSON。 Postman 使用 CURL 命令。

我刚刚尝试了两组标头值，同样的错误。

我在控制台中看到的错误的更多细节：[[PromiseValue]]: Error: Network Error at createError (localhost:3000/static/js/5.chunk.js:1323:15) at XMLHttpRequest.handleError (localhost:3000/static/js/5.chunk.js:818:14)

你有没有想过解决这个问题？ @KeelRisk

【参考方案1】：

没有明确关注你。如果你说你可以在邮递员中访问https://bucket-name.s3.us-east-2.amazonaws.com/rulesSummaryData2.json，这对我来说似乎是一个 cors 问题。

S3 存储桶的 Cors

如果您还没有这样做，请在 S3 存储桶中配置以下 Cors 策略。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

参考：

如何将 Cors 配置添加到 S3 存储桶 - https://docs.aws.amazon.com/AmazonS3/latest/user-guide/add-cors-configuration.html

【讨论】：

是的，就是这样！因此，对于那些遇到这种情况的人，尽管为存储桶和/或文件提供了完全公共访问权限，但您必须添加 CORS 以进行 fetch 或 axios.get 调用。