在 JavaScript 中从 S3 Bucket 中读取 JSON 时没有“Access-Control-Allow-Origin”错误

Question

我有一个内置 JavaScript 的 Web 应用程序，可以从 JSON 文件加载数据。 我正在尝试使用此函数读取我在 S3 存储桶上的这个 JSON（JSON 每天更新）：

const url = `https://s3.us-east-2.amazonaws.com/sfbucket.starr/sf_events.json`;


const successCb = (resp) => {
    console.log(resp);
};

const errorCb = (err) => {
    console.error('Error - ', err);
};

function downloadObject(url, successCb, errorCb) {
    fetch(url)
      .then(response => response.json())
      .then(successCb)
      .catch(errorCb);
}

downloadObject(url, successCb, errorCb);

我收到此错误：

Access to fetch at 'https://s3.us-east-2.amazonaws.com/sfbucket.starr/sf_events.json' from origin 'http://localhost:7887' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

该网站已部署，但我正在http://localhost:7887/

我尝试过的事情：

1. 我已经公开了 S3 存储桶。

2. 我读过我可能需要编辑 S3 存储桶中的 CORS 配置。 所以，我做了这个 CORS 配置：

    [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "http://www.example1.com" ], "ExposeHeaders": [] }, { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "http://localhost:7887/" ], "ExposeHeaders": [] }, { "AllowedHeaders": [], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] }

   ]

我可以尝试什么来解决这个问题？

Answer 1

我猜 Fetch 可能会启动“PreFlight”...所以可能必须启用“OPTIONS”Http 方法。

检查此链接

尝试将“选项”与“获取”一起添加...

并且如果/当您让它工作时，请清理策略以仅限于必要的内容，并交叉检查您可能不需要的其他设置，特别是与安全/访问相关的设置。