Реагировать на блокировку CORS при загрузке на s3

Question

У меня есть форма создания, которая работает, однако мои изображения, кажется, не загружаются в S3 из-за CORS

Я получаю следующее

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)) блокируется. У меня есть настройки 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, OPTIONS'

Это избавит от ошибки.

Но как на самом деле установитьзаголовки?

На npm имеется по крайней мере одно промежуточное программное обеспечение для обработки CORS в Express: 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])