Service Workers、AWS CloudFront 和 Access-Control-Allow-Origin

Question

我习惯于在自己的服务器上构建网站，添加 Service Worker 代码以帮助确保它即使在没有互联网访问可用时也能加载，并将负载分散到 Amazon 的 CloudFront 服务器上。但我总是直接从我的服务器获取我的 Service Worker 代码中的文件。最近我尝试使用我的 CloudFront URI 解析这些资源，但一切都因 'Access-Control-Allow-Origin' 错误而失败。

我一直在阅读这篇文章，但我迷失了所有的细节。我尝试在 'Permissions' 和 'CORS configuration editor' 下向我的 S3 存储桶添加一个 XML 语句，但它只是部分起作用的意思是，它只会拉下一些文件，恐怕我在这里做一些非常不安全的事情。

<?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);
        })
    );
});

任何人对我如何摆脱这个错误有任何想法？

Answer 1

我通过阅读一百万个其他帖子并尝试了所有方法来解决这个问题，最后，这就是我解决问题的确切方法。

为了在移动到 Amazon 的 CloudFront 服务器后正确加载列出的资源，您需要将其添加到您的 S3 存储桶，在 Permissions/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>

然后您需要select CloudFront 下的适当分配并单击“行为”选项卡。创建或编辑现有行为和 select 以下设置：

允许的 HTTP 方法：GET、HEAD、OPTIONS

基于所选请求的缓存Headers：白名单

将这些添加到白名单下的右侧框中 Headers:

Access-Control-Request-Headers
Access-Control-Request-Method
来源

然后单击底部的 'Yes, Edit' 按钮并给它大约 10 分钟的时间在系统中传播并使用 Chrome 进行测试。

Service Workers、AWS CloudFront 和 Access-Control-Allow-Origin

Service Workers, AWS CloudFront and Access-Control-Allow-Origin

amazon-web-services

service-worker

amazon-cloudfront