上传到 s3 时反应 CORS 被阻止

Posted 2023-03-04

【中文标题】上传到 s3 时反应 CORS 被阻止

【英文标题】：React CORS being blocked when uploading to s3

【发布时间】：2020-02-28 13:16:30

【问题描述】：

我有一个正在工作的创建表单，但是，由于 CORS，我的图像似乎没有上传到 S3

我得到以下信息

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://henrywatches-dev.s3.amazonaws.com/. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

我有以下fetch 请求

if (isValid) 
  fetch("/api/collections/create", 
    method: "POST",
    mode: "cors",
    body: JSON.stringify(this.state),
    headers: 
      Accept: "application/json",
      "Content-Type": "application/json"
    
  )
    .then(res => res.json())
    .then(() => uploadFile(this.state.images, this.s3Config))
    .then(
      () => this.setState( successMsg: true ),
      () => this.setState(initalState)
    )
    .catch(error => 
      console.log(error);
    );
  

就像我提到的表单正在工作并且确实创建了一条记录，只是 S3 .then(() => uploadFile(this.state.images, this.s3Config)) 被阻止了。我已经使用 express 设置了 cors，但是由于 S3 发生在前端，cors 再次弹出，因为它没有发生在服务器端。

我已经尝试过mode: 'cors'，但这在修复错误方面没有任何作用。

【问题讨论】：

响应的 HTTP 状态码是什么？您可以使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？

【参考方案1】：

您需要在后端设置这些标头：

'Access-Control-Allow-Origin' 具有值 '*' 'Access-Control-Allow-Headers' 具有值 '*' 'Access-Control-Allow-Methods'，值为 'GET、POST、PUT、DELETE， 选项'

这将消除错误。

但是如何实际设置标题？

npm 上至少有一个中间件用于处理 Express 中的 CORS：cors。

这是设置自定义响应标头的方法，来自ExpressJS DOC

res.set(field, [value])

将标题字段设置为值

res.set('Content-Type', 'text/plain');

或传递一个对象一次设置多个字段。

res.set(
  'Content-Type': 'text/plain',
  'Content-Length': '123',
  'ETag': '12345'
)

别名为

res.header(field, [value])

【讨论】：

我在哪里设置它们？就快递而言，我的app.js中有app.use(cors());

查看文档，app.use(cors()); 应该足够了，因为它涵盖了所有来源和请求。

除非我可以将它添加到路由服务器端并传递给反应？

更新我们，它是否只通过执行 app.use(cors()); ?一般来说，我上面输入的标题对任何后端都有好处（我通常在 laravel 上开发，所以我给了你在我过去的经验中工作的原始标题）

所以我在 catch 之前移到了 uploadFile 并且还在我的 s3 存储桶中添加了一个 cors 配置我现在收到了这个回复 i.gyazo.com/f5f9bb811f7aa96eaed4e946398b6d2e.png