#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
операция.
Комментарии:
1. Да, я пытался ввести «s3: Put *», но все равно получаю ту же ошибку 403 forbidden с тем же выводом журнала консоли, о котором я упоминал в вопросе
Ответ №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.