从 JavaScript 中的 S3 存储桶读取 JSON 时没有“Access-Control-Allow-Origin”错误

Posted 2023-03-04

【中文标题】从 JavaScript 中的 S3 存储桶读取 JSON 时没有“Access-Control-Allow-Origin”错误

【英文标题】：No 'Access-Control-Allow-Origin' error when reading in JSON from S3 Bucket in JavaScript

【发布时间】：2021-09-27 09:35:46

【问题描述】：

我有一个内置 javascript 的网络应用程序，它从 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/ 上进行测试

我尝试过的事情：

我已公开 S3 存储桶。

我了解到我可能需要编辑 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": []
 

]

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

【问题讨论】：

请注意，我们更喜欢这里的技术写作风格。我们轻轻地劝阻问候，希望你能帮助，谢谢，提前感谢，感谢信，问候，亲切的问候，签名，请你能帮助，聊天材料和缩写 txtspk，恳求，你多久了被卡住、投票建议、元评论等。只需解释您的问题，并展示您尝试过的内容、预期的内容以及实际发生的情况。

您是否尝试过在AllowedOrigins 中不使用“/”？喜欢：http://localhost:7887 而不是 http://localhost:7887/?

而且您的文件似乎也不是有效的 json，它以 var sf_events =

开头

【参考方案1】：

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

Check this link

尝试将“OPTIONS”与“GET”一起添加...

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