СООБЩЕНИЕ 403 запрещенный ответ CORS при загрузке изображения в AWS S3 bucket ReactJS

#reactjs #amazon-web-services #amazon-s3 #cors

#reactjs #amazon-веб-сервисы #amazon-s3 #cors

Вопрос:

Здравствуйте, итак, я пытаюсь загрузить изображения в AWS S3 из моего приложения React, используя пакет NPM под названием react-s3. Я использую учетную запись AWS Educate и правильно настроил доступ и секретный ключ. После того, как я выбираю изображение и регистрирую вывод консоли, он выдает мне 403 запрещенную ошибку следующим образом.

СООБЩЕНИЕ https://shopkartimages.s3.amazonaws.com / 403 (Запрещено)

 Response {type: "cors", 
url: "https://shopkartimages.s3.amazonaws.com/", 
redirected: false, 
status: 403, ok: 
false, …}
body: (...)
bodyUsed: false
headers: Headers
__proto__: Headers
ok: false
redirected: false
status: 403
statusText: "Forbidden"
type: "cors"
url: "https://shopkartimages.s3.amazonaws.com/"
__proto__: Response

Моя политика корзины заключается в следующем :

 {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3Permissions",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:Get*",
                "s3:List*"
            ],
            "Resource": "arn:aws:s3:::shopkartimages/*"
        }
    ]
}

Моя конфигурация CORS в S3 выглядит следующим образом:

 [
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

1. Проверьте, имеют ли ваш ключ доступа и секретный ключ, которые принадлежат роли, правильные разрешения для этого S3 bucket или нет.

2. Да, братан, я проверил оба учетных данных, и они верны

3. можете ли вы опубликовать ошибку консоли?

4. Я уже опубликовал его выше

5. Вы устранили проблему? @aviboy2006

Ответ №1:

 {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3Permissions",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:Get*",
                "s3:List*"
            ],
            "Resource": "arn:aws:s3:::shopkartimages/*"
        }
    ]
}

Ваша политика корзины разрешает только Get List операции amp; .
А загрузка файла — это PUT операция.

Ответ №2:

Я столкнулся с точно такой же проблемой с react-s3. В конце концов я отказался от него в пользу AWS SDK, который отлично работает для меня (даже в react). Вот что для этого потребовалось.

Сначала установите aws-sdk:

 $ npm install aws-sdk

Затем замените все, что вы делали с react-s3, на это:

 import AWS from 'aws-sdk';

AWS.config.update({ region:region, credentials: new AWS.Credentials(secret_id, secret_access_key)});
var s3 = new AWS.S3({apiVersion: "2006-03-01", params: { Bucket: bucketName }});

let upload_params = {Bucket: bucketName, Key: file.path, Body: file};
let upload = new AWS.S3.ManagedUpload({params: upload_params});
let promise = upload.promise();
promise.then(
    function(data){console.log("Successfully uploaded:", file.path);},
    function(err){console.log("Failed to upload", file.name, "with error:", err.message);}
);

Вот мои материалы CORS из разрешений корзины S3:

 [
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]

Кроме того, публичный доступ заблокирован, и я не вмешиваюсь в пользовательские политики корзины.

Надеюсь, это поможет кому-то еще справиться с этими кошмарами CORS / S3 / react.