上传到 s3 时反应 CORS 被阻止

Question

我有一个正在工作的创建表单，但是，由于 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'，但这在修复错误方面没有任何作用。

Answer 1

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

1. 'Access-Control-Allow-Origin' 具有值 '*'
2. 'Access-Control-Allow-Headers' 具有值 '*'
3. '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])