Проблема перекрестного происхождения при загрузке в aws - PullRequest
Новая
       9

Проблема перекрестного происхождения при загрузке в aws

0 голосов
/ 26 июня 2018

Здесь выставлен запрос 

axios({
  method: 'PUT',
  url: signedRequest,
  data: file, 
  headers: {
    'Content-Type': 'multipart/form-data',
    'Access-Control-Allow-Origin': '*'
  }
})    
.then((response) => {            
   console.log(response)
}).catch((error) => {
   console.log(error)
});

А вот cors config 

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

А вот кросс-ошибка источника 

Failed to load https://tochpro.s3-us-west-2.amazonaws.com/wehab/373-285x215.jpg%20%20%20%20?AWSAccessKeyId=AKIAIH7OJGP3PNYIN5YQ&Content-Type=multipart%2Fform-data&Expires=1559998463&Signature=3iLYA0VwD3SjkHOkPfCQALvLSk0%3D: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Пожалуйста, помогите мне выйтиэтой ошибки ... И, пожалуйста, дайте мне знать, что мне здесь не хватает ...

1 Ответ

0 голосов
/ 26 июня 2018

Трудно сказать, что из этого получается, ничего не выпрыгивает ... хотя из моего опыта проблема заключалась в том, что signurl совпадает с тем, что получает S3.

В верхней части головы может быть одно или несколько из следующих значений:

  • тип содержимого должен соответствовать типу загружаемого файла, например, image / jpeg
  • дополнительные параметры, которые не разрешены (ACL или CacheControl заставили меня ненадолго)
  • иногда браузер мешает с локальным хостом или заголовками безопасности браузера в вашем приложении

Вот как устроено мое рабочее решение ...

Извлечение из лямбды, которое создает URL: 

var bodyJson = JSON.parse(event.body);
var params = {
    Bucket: process.env.BUCKET,
    Key: 'path/to/file/' + bodyJson.filename,
    Expires: 60,
    ContentType: bodyJson.filetype
};
var s3 = new aws.S3();
s3.getSignedUrl('putObject', params, function (err, url) { ... });

Я использую ng-загрузка файла в AngularJS, но я понимаю, что это стандартный http-запрос: 

Upload.http({
    method: 'PUT',
    url: signedUrl,
    headers : {
        'Content-Type': fileToUpload.type
    },
    data: fileToUpload
}

Конфигурация S3 CORS: 

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

Надеюсь, это поможет вам или кому-то еще в будущем.

...