Amazon web services 服务人员、AWS CloudFront和访问控制允许始发

我习惯于在自己的服务器上构建网站，添加服务人员代码以确保即使在没有互联网接入的情况下也能加载，并将负载分散到Amazon的CloudFront服务器上。但我总是直接从服务器获取服务人员代码中的文件。最近，我尝试使用CloudFront URI解析这些资源，但由于“访问控制允许来源”错误，一切都失败了

我一直在读这篇文章，但我对所有的细节都迷失了方向。我尝试在“权限”和“CORS配置编辑器”下向我的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>

---

有人知道我该如何摆脱这个错误吗？

我通过阅读一百万篇其他帖子并尝试所有方法，终于找到了解决问题的方法

为了让列出的资源在移动到Amazon的CloudFront服务器后能够正确加载，您需要在权限/CORS配置下将其添加到S3存储桶中：

<?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>

https://PUTYOURDOMAINNAMEHERE.com
得到
3000
授权

然后，您需要在CloudFront下选择适当的发行版，并单击“行为”选项卡。创建或编辑现有行为并选择以下设置：

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

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

将以下内容添加到白名单标题下的右侧框中：

• 访问控制请求头
• 访问控制请求方法
• 起源

---

然后单击底部的“Yes，Edit”（是，编辑）按钮，给它大约10分钟的时间在系统中传播并使用Chrome进行测试。

问题可能是Cloudfront没有返回CORS标头。你可以在这里找到疑难解答信息：@AgostBiro我已经阅读了好几次这个页面，并尝试做他们建议的事情，但没有成功。基本上，我甚至不知道我在这页上做什么，这根本不是为我这样理解这件事的人而写的。我只需要被告知如何解决这个问题，我会从解决方案中学到比冗长的方向更好的东西。

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

<?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>