Ошибка CORS при загрузке шрифтов в рабочем приложении Rails / Vue на Heroku и Amazon S3 - PullRequest
Новая
       21

Ошибка CORS при загрузке шрифтов в рабочем приложении Rails / Vue на Heroku и Amazon S3

0 голосов
/ 09 декабря 2018

У меня есть приложение rails / VueJS, которое не загружает мои s3g-файлы и шрифты S3 через font-awesome.Я загрузил все файлы в мои относительные папки в S3.Любые файлы, загруженные через мое приложение, отображаются правильно - однако эти статические файлы и шрифты не работают.Ошибка CORS выглядит следующим образом:

ошибка № 1 (для шрифтов): 

Access to font at 'https://s3.amazonaws.com/myappname/fonts/fontname-regular.woff' from origin 'https://nyappname.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ошибка № 2 (для изображений SVG): 

GET https://s3.amazonaws.com/myappname/avatar-group.svg 404 (Not Found)

Я предположилоба они вызваны одной и той же проблемой установки CORS, но я не уверен.Я называю эти файлы следующим образом в различных местах в моих файлах CSS:

Custom.css 

.avatar:after
{
    position: absolute;

    width: 0;
    height: 0;

    content: '';

    background-image: url(https://s3.amazonaws.com/myappname/avatar-status.svg), url(https://s3.amazonaws.com/myappname/avatar-group.svg), url(https://s3.amazonaws.com/myappname/avatar-group-hover.svg), url(https://s3.amazonaws.com/myappname/avatar-group-hover-last.svg);
}

Какой должна быть моя конфигурация CORS в Amazon S3 и должна ли эта конфигурация быть настроена натолько корневое ведро?Я пробовал сотню вещей безрезультатно, поэтому любая помощь была бы потрясающей ... спасибо,

ОБНОВЛЕНИЕ:

Текущая конфигурация CORS в корзине S3: 

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

Ответы [ 2 ]

0 голосов
/ 09 декабря 2018

После нескольких часов проб разных вещей, я понял, что это была чертова опечатка (одна буква).Если это помогает кому-либо, имеющему подобные проблемы, я добился прогресса, покопавшись в ошибках консоли chrome и щелкнув по реальным ссылкам / именам файлов, которые показали мне ошибку в браузере, что мой s3 «Имя корзины не существует».Это помогло определить проблему.

0 голосов
/ 09 декабря 2018

Я думаю, CORSRule разрешить только 1 AllowedOrigin на тег.Вы можете изменить на 

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