Не удалось подключиться к AWS S3 из React App

Question

РЕДАКТИРОВАТЬ

Я обнаружил в комментариях, что я запрашивал общий S3 API вместо специфицированного c Buckets API. Выполнение этого из браузера не работает, и я получил ошибку, о которой сообщил здесь. Чтобы «исправить» это, я просто переключился на использование API-интерфейса спецификации c.

Я использовал те же конфигурации, но вместо этого я вызвал метод s3.upload, как в:

  const uploadFile = (file) => {
    const uploadParams = { ACL: "public-read", Bucket: config.bucketName, Key: file.name, Body: file };

    s3.upload(uploadParams, function (err, data) {
      if (err) {
        console.log("Error", err);
      } else {
        console.log("Success", data.Location);
        // setProfilePic(data.location)
      }
    })
  }

---

Я хочу загрузить файл на S3 из моего приложения React. Я использую «официальный» модуль aws -sdk, следуя этому руководству: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-creating-buckets.html#s3 -example-creation-buckets-сценарий

Проблема в том, что я получаю Ошибка CORS прямо в моей первой попытке напечатать мои контейнеры:

import AWS from 'aws-sdk'

const config = {
  bucketName: 'train-my-game',
  dirName: 'profile', /* optional */
  region: 'us-east-2',
  accessKeyId: proccess.env.ACCESS_KEY,
  secretAccessKey: proccess.env.SECRET,
}

AWS.config.update({ region: config.region, accessKeyId: config.accessKeyId, secretAccessKey: config.secretAccessKey });
const s3 = new AWS.S3({ apiVersion: '2006-03-01' });

const printBuckets = () => {
  s3.listBuckets(function (err, data) {
    if (err) {
      console.log("Error", err);
    } else {
      console.log("Success", data.Buckets);
    }
  });
}
printBuckets()

Это происходит с ошибкой: Access to XMLHttpRequest at 'https://s3.us-east-2.amazonaws.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

В AWS мой контейнер настроен со следующим разрешением XML для конфигурации CORS:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Кто-нибудь знает, как это исправить?

Спасибо

Answer 1

Cross-Origin-Resource-Sharing (CORS) - это механизм, который запрещает веб-приложению выполнять код на стороне клиента, который отправляет запросы другому веб-приложению. Представьте, что Facebook может запустить какой-нибудь javascript и прочитать письмо, которое вы имеете в Gmail (потому что вы уже вошли в систему).

Чтобы решить эту проблему, все браузеры блокируют javascript с одного сервера от доступа к любому HTTP ресурсы по любому другому URL-адресу / IP-адресу, если только этот URL-адрес или IP-адрес явно не разрешает (доверяет) сайт, с которого javascript происходит.

В случае многих из AWS SDK необходимо явно указать, какие заголовки CORS вы хотели бы отправить при взаимодействии с вашими AWS (в данном случае S3) ресурсами.

См .: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/cors.html

Replace AllowedOrigin "example.org "с полным доменным именем сервера, обслуживающего ваше реагирующее приложение.

Answer 2

Чтобы поместить объекты в корзину, составить список объектов в корзине, получить политику корзины и т. Д. c. вам нужно включить CORS в целевой корзине S3. Прочитайте документацию CORS или посмотрите пример на awslabs / aws - js -s3-explorer .

Вы не сможете вызывать ListBuckets, Однако. Причина в том, что вызов ListBuckets выполняется для конечной точки службы S3 (s3.amazonz aws .com), а не для конечной точки сегмента S3 (bucket.s3.amazon aws .com), и вы не можете включить CORS на Конечная точка сервиса S3. Таким образом, ListBuckets никогда не будет работать в обычном браузере. Некоторые браузеры позволяют вам подавлять CORS, но это не нормальная работа браузера. Очевидно, что если ваше приложение будет работать за пределами браузера, например, как CLI или в Electron, то ListBuckets будет работать нормально.

Answer 3

Если вы хотите отправлять заголовки авторизации, ваш сервер должен быть настроен на это. Настройте сервер так, чтобы он отвечал на запрос OPTIONS по этому URL с заголовком Access-Control-Allow-Headers: Authorization.