Сервисные работники, AWS CloudFront и Access-Control-Allow-Origin - PullRequest
Новая
       5

Сервисные работники, AWS CloudFront и Access-Control-Allow-Origin

0 голосов
/ 21 марта 2020

Я привык создавать сайты на своем собственном сервере, добавляя код Service Worker, чтобы обеспечить его загрузку даже при отсутствии доступа к inte rnet, и распределять нагрузку между серверами Amazon CloudFront. Но я всегда выбирал файлы в коде Service Worker напрямую с моего сервера. Недавно я попытался разрешить эти ресурсы с помощью моего CloudFront URI, и все не удалось с ошибкой «Access-Control-Allow-Origin».

Я читал об этом тон, но теряюсь в все детали. Я попытался добавить оператор XML в свою корзину S3 в разделе «Разрешения» и «Редактор конфигурации CORS», но он работает только частично, это означает, что он только сносит некоторые файлы, и я боюсь, что я делаю что-то очень небезопасное здесь. 

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

Я также пытался 

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

, но либо изменение задерживается внутри системы, либо просто не имеет значения, так что я немного растерялся относительно того, что смотреть дальше. Вот мой код Service Worker на случай, если это поможет. 

const cacheName='v2020.03.19-01';

var cacheFiles=[
    'https://xyzzy.cloudfront.net/ccmsusr/_css/animate.min.css',
    'https://xyzzy.cloudfront.net/ccmsusr/_js/jquery-3.4.1.min.js',
    'https://xyzzy.cloudfront.net/ccmsusr/_js/jquery-validate-1.19.0.min.js',
    'https://xyzzy.cloudfront.net/ccmsusr/_js/jquery-validate-additional-methods-1.19.0.min.js',
    'https://xyzzy.cloudfront.net/ccmstpl/_css/owl.carousel-2.3.4.min.css',
    'https://xyzzy.cloudfront.net/ccmstpl/_js/owl.carousel.min.js',
    'https://xyzzy.cloudfront.net/ccmstpl/_js/jquery.mobile.custom.min.js',
    'https://xyzzy.cloudfront.net/ccmstpl/_js/modernizr-3.6.0-custom-min.js',
    '/en/_css/style-ltr.css',
    '/en/_js/main.js'
]

self.addEventListener('install',e=>{
    e.waitUntil(
        caches.open(cacheName).then(cache=>{
            return cache.addAll(cacheFiles);
        })
    );
});

self.addEventListener('activate',e=>{
    e.waitUntil(
        caches.keys().then(keyList=>{
            return Promise.all(keyList.map(key=>{
                if(key!==cacheName) {
                    return caches.delete(key);
                }
            }));
        })
    );
});

// Check the cache first, if that fails look on the network. (Best for mostly static websites.)
self.addEventListener('fetch',e=>{
    e.respondWith(
        caches.match(e.request).then(response=>{
            if(response) {
                return response;
            }
            return fetch(e.request);
        })
    );
});

У кого-нибудь есть идеи, как мне избавиться от этой ошибки?

1 Ответ

0 голосов
/ 22 марта 2020

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

Для правильной загрузки перечисленных ресурсов один раз Переместившись на сервер Amazon Amazon CloudFront, вам нужно добавить это в корзину S3 в разделе «Разрешения / конфигурация CORS»: 

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

Затем необходимо выбрать соответствующий дистрибутив в разделе CloudFront и перейти на вкладку «Поведения». Создайте или измените существующее поведение и выберите следующие параметры:

Разрешенные методы HTTP: GET, HEAD, OPTIONS

Кэш на основе выбранных заголовков запроса: Белый список

Добавить их в поле справа под заголовками белого списка:

  • Заголовки-контроля доступа-запроса
  • Метод-контроля доступа-запроса
  • Источник

Затем нажмите кнопку «Да, Изменить» внизу и дайте ей около 10 минут для прохождения через систему и тестирования с использованием Chrome.

...