Эффект кеширования на CORS: заголовок "Access-Control-Allow-Origin" отсутствует на запрошенном ресурсе

Краткая версия этой проблемы заключается в том, что мы видим типичную ошибку CORS (x has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.), но мы абсолютно отправляем указанные заголовки. Запросы прекрасны, но если после n (неопределенного шаблона) количество времени НЕКОТОРЫЕ (без реального шаблона для этого, кроме него случайных 1 или 2 активов, на которые ссылается в html файле), запросы внезапно начнут сбой. При жестком обновлении или отключении кеша проблема устранена.

Нам интересно, как кеширование может повлиять на CORS в этом случае? Или если проблема находится в другом месте?

Мы видим, что актив загружается в первую очередь.

Здесь cURL-представление того, что браузер (хром, не протестированный в другом месте) отправляет на сервер ( облачный экран перед s3):

curl -I 'https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css' -H 'Referer: https://lystable.kalohq.ink/projects/2180?edit=true' -H 'Origin: https://lystable.kalohq.ink' -H 'DPR: 2' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gec

И заголовки в ответ на это выглядят так:

HTTP/1.1 200 OK
Content-Type: text/css
Content-Length: 5632
Connection: keep-alive
Date: Wed, 28 Jun 2017 09:23:04 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Last-Modified: Wed, 28 Jun 2017 09:16:15 GMT
ETag: "ece4babc2509d989254638493ff4c742"
Cache-Control: max-age=31556926
Content-Encoding: gzip
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
Age: 3384
X-Cache: Hit from cloudfront
Via: 1.1 adc13b6f5827d04caa2efba65479257c.cloudfront.net (CloudFront)
X-Amz-Cf-Id: PcC2qL04aC4DPtNuwCudckVNM3QGhz4jiDL10IDkjIBnCOK3hxoMoQ==

После этого вы можете некоторое время просматривать сайт, обновлять его несколько раз, и все в порядке и dandy.

Но тогда вы можете обновиться, и вдруг вы увидите ошибку в консоли:

Access to CSS stylesheet at 'https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css' from origin 'https://kalohq.ink' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://kalohq.ink' is therefore not allowed access.

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

Файл, загружающий эти файлы в HTML, выглядит следующим образом:

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Kalo</title><meta name="description" content="Kalo is used by the best teams on the planet to onboard, manage, and pay their freelancers. "><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Accept-CH" content="Width,DPR,Save-Data"><script>window.performance&&"function"==typeof window.performance.mark&&window.performance.mark("start load bootstrap"),console.log("Kalo v0.214.1 🎉")</script><script type="text/javascript" crossorigin="anonymous">window.webpackManifest={0:"moment-timezone-data.8189aab661847dea1b73.chunk.js",1:"1.7645e36f0742ed31139b.chunk.js",2:"2.bf0a1c9b400d715e3138.chunk.js",3:"3.d077b7a1cede6f6960e6.chunk.js",4:"4.0bbd51f182d8fa3f4951.chunk.js",5:"5.1dcf124ea7874546fc7a.chunk.js",6:"6.85ee04326ef5cfe2c084.chunk.js",7:"7.cf718eabaa3814fcb47c.chunk.js",8:"8.4c4c5b070e09afe037a1.chunk.js",9:"9.ba3b9a5f540f057fca46.chunk.js",10:"10.3c850061770df8801575.chunk.js",11:"11.df971dd9c4ab435fd421.chunk.js",12:"12.81905afa591a4796dcfc.chunk.js",13:"13.0f78c0c77d45cd79ac26.chunk.js",14:"14.f8f9f24d15e1cc4372a1.chunk.js",15:"15.6badd92530b5da668e98.chunk.js",16:"16.ef87b8dc2f87ca2d40a1.chunk.js",17:"17.bf842b852470057c4f0b.chunk.js",18:"18.f091321e6a0bbf16bf1f.chunk.js",19:"19.0297861a162b49308887.chunk.js",20:"20.7281da4b01eb4eb4bf1f.chunk.js",21:"21.781ca5137a9c76031df2.chunk.js",22:"22.c7dfd45fc0bd41c7618d.chunk.js",23:"23.8c4885794fd57453884a.chunk.js",24:"24.1447090b6f41a311414e.chunk.js",25:"25.021a38e680888fe2ac7e.chunk.js",26:"26.1afe06be0d6164d3409a.chunk.js",27:"27.dc70b696039ad4762a3b.chunk.js",28:"28.8c383709ce92ecae6b0c.chunk.js",29:"29.f594eb538f606ae17c50.chunk.js",30:"30.a2c1dfc70e0fac57b2a4.chunk.js",31:"31.2eaee95b85227b23ccd8.chunk.js",32:"32.528e99c8151fef966483.chunk.js",33:"33.c3b7530ab92bc1280136.chunk.js",34:"34.1eb5635dc498ad450839.chunk.js",35:"35.e71c1e7bc6092ff2a35f.chunk.js",36:"36.0d174c67ddb177944140.chunk.js",37:"37.af1c6ed4cde9120da636.chunk.js",38:"38.fb0dd22a16e7b597ef93.chunk.js",39:"39.c17f705a3438de3dc997.chunk.js",40:"40.d509fa240e2adf2888aa.chunk.js",41:"41.37d2f0e0e06a3c7d816b.chunk.js",42:"42.4febbf78adc3084afec3.chunk.js",43:"43.7aa48b320fcf69adb0a3.chunk.js",44:"44.5e6da9391c7412910447.chunk.js",45:"45.a17d5b7c5e534f260841.chunk.js",46:"46.a1d3a7790959ac892ed0.chunk.js",47:"47.241627b0e5da4ce35606.chunk.js",48:"48.84f9532a64f5a3beb20c.chunk.js",49:"49.f8527afe7cade8fc293a.chunk.js",50:"50.776b466f9019479de8fc.chunk.js",51:"51.ca34827c84d4bcc82079.chunk.js",52:"52.517f4f6c63395646cdd7.chunk.js",53:"53.e3a2103e4151cd13300f.chunk.js",54:"athena.5e6c5b01662cea2c8b1a.chunk.js",55:"hera.b69b80db056ad9c9389f.chunk.js",56:"hermes.29bb236b97c128e8b6ee.chunk.js",57:"iris.834233a6fb064bf576a9.chunk.js",58:"hephaestus.7ac71b3274dda739ba1f.chunk.js",59:"59.ce1aefa687f2ef9c9908.chunk.js",60:"60.5070b818882287dfc402.chunk.js",61:"61.19d5149d0a2bd9ef3c1e.chunk.js",62:"62.d7831f900b939591822e.chunk.js"}</script><link rel="shortcut icon" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/favicon.ico'; return false;" crossorigin="anonymous"><link href="#" onclick="location.href='https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css'; return false;" rel="stylesheet" crossorigin="anonymous"><link href="#" onclick="location.href='https://assets-frontend.kalohq.ink/style.hermes.689f9795642815d4b8afd20e446a174d.css'; return false;" rel="stylesheet" crossorigin="anonymous"><link rel="preload" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/hermes.29bb236b97c128e8b6ee.js'; return false;" as="script" crossorigin="anonymous"><link rel="preload" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/style.hermes.689f9795642815d4b8afd20e446a174d.css'; return false;" as="style" crossorigin="anonymous"><link rel="preload" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/allapps.commons.8395b1aa9666e3271c40.js'; return false;" as="script" crossorigin="anonymous"><link rel="preload" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css'; return false;" as="style" crossorigin="anonymous"><link rel="preload" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/vendor.83e606c69fc5ae7aeb9b.js'; return false;" as="script" crossorigin="anonymous"><link rel="preload" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/core/styles/fonts/Fakt-Soft-Pro-SemiBold/FaktSoftPro-SemiBold.1901bce5eea18c64a60693e961585ba1.woff'; return false;" as="font" crossorigin="anonymous"><link rel="preload" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/core/styles/fonts/Fakt-Soft-Pro-Blond/FaktSoftPro-Blond.4ab21e2be2f31a0ab8d798a9c65f99c1.woff'; return false;" as="font" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/hera.b69b80db056ad9c9389f.js'; return false;" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/iris.834233a6fb064bf576a9.js'; return false;" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/athena.5e6c5b01662cea2c8b1a.js'; return false;" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/moment-timezone-data.8189aab661847dea1b73.chunk.js'; return false;" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/style.hera.f00a272db8e5756775fb2632e67c1056.css'; return false;" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/style.iris.1465dc22f4279c748a04c66f3b4494de.css'; return false;" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/style.athena.6acb14c0d060121364c9a0cf3e6fa0ad.css'; return false;" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/_/node_modules/@kalo/ui/icon/fonts/MaterialIcons/MaterialIcons-Regular.012cf6a10129e2275d79d6adac7f3b02.woff'; return false;" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/core/assets/fonts/MaterialIcons-Regular.012cf6a10129e2275d79d6adac7f3b02.woff'; return false;" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/_/node_modules/@kalo/ui/icon/fonts/MaterialIcons/MaterialIcons-Regular.570eb83859dc23dd0eec423a49e147fe.woff2'; return false;" crossorigin="anonymous"><link rel="prefetch" href="#" onclick="location.href='https://assets-frontend.kalohq.ink/core/assets/fonts/MaterialIcons-Regular.570eb83859dc23dd0eec423a49e147fe.woff2'; return false;" crossorigin="anonymous"></head><body><main id="app"><!--[if lt IE 8]>
  <p class="browserupgrade">You are using an outdated browser. Please <a href="#" onclick="location.href='http://browsehappy.com/'; return false;">upgrade your browser</a> to improve your experience.</p>
  <![endif]--><noscript>Kalo - Work without boundaries Please wait a moment as we load Kalo. Please make sure you have Javascript enabled to continue. Kalo’s aim is to give companies complete visibility over their external network.</noscript><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5XLW75" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript></main><div class="root __splash"><style>html{position:static!important;overflow-y:auto}.root{transition:opacity .35s linear;color:#234957;background-color:#f9fafc;position:absolute;top:0;right:0;bottom:0;left:0;opacity:1}.root.exit{opacity:0!important}.navigation{height:60px;background:#fff;border-bottom:1px solid #eceff1}.login{background:#ea5f6e;position:absolute;top:0;left:0;bottom:0;width:50%;display:flex;justify-content:center;align-items:center}@media screen and (max-width:767px){.login{width:100%;right:0}}.hide{display:none!important}.logo{height:107px}</style><div id="navbar" class="navigation hide"></div><div id="login" class="login hide"><div class="logo"><svg width="160" height="70" viewBox="0 0 206 90" xmlns="http://www.w3.org/2000/svg"><title>Kalo</title><path fill-rule="evenodd" fill="#fff" d="M17.629 47.172c2.31 0 4.254-.986 6.078-2.833l18.845-19.706c1.824-1.971 3.89-2.957 6.323-2.957 7.294 0 10.212 9.114 5.835 13.55L35.378 54.562l18.724 19.706c3.283 3.571 3.526 8.498.244 12.07-1.46 1.601-3.406 2.464-5.837 2.464-2.552 0-4.62-.986-6.2-2.834L23.707 65.646c-1.7-1.847-3.647-2.832-5.835-2.832h-1.58v17.612c0 4.804-3.405 8.5-8.147 8.5-4.376 0-8.145-3.942-8.145-8.5V8.498C0 3.695 3.647 0 8.145 0c4.5 0 8.147 3.695 8.147 8.498v38.674h1.337zm97.134 29.56c0 2.586-.972 4.433-2.916 5.789-6.566 4.557-15.077 6.773-25.654 6.773-16.656 0-25.653-9.236-25.653-21.676 0-11.455 8.146-20.076 25.045-20.076 3.891 0 8.39.616 13.496 1.848v-3.326c0-6.528-3.283-9.608-11.55-9.608-3.525 0-7.417.74-11.672 2.095-6.686 2.094-11.185-1.11-11.185-6.405 0-3.572 1.823-6.035 5.35-7.513 4.742-2.094 10.698-3.08 17.871-3.08 17.872 0 26.868 8.376 26.868 25.003v30.176zm-15.682-4.68V60.965c-4.378-1.354-8.39-1.97-12.159-1.97-6.443 0-10.577 3.202-10.577 8.006 0 5.296 4.134 8.252 10.942 8.252 4.5 0 8.51-1.11 11.794-3.203zm39.845 8.904c0 4.803-3.405 8.498-8.147 8.498-4.376 0-8.145-3.941-8.145-8.498V9.15c0-4.803 3.647-8.62 8.145-8.62 4.5 0 8.147 3.817 8.147 8.62v71.806zm57.513 1.359c-5.348 4.681-12.035 7.02-20.06 7.02-7.903 0-14.589-2.339-20.06-7.02-5.471-4.68-8.511-10.715-9.118-17.982-.365-5.788-.365-11.7 0-17.612.607-7.391 3.525-13.426 8.996-18.106 5.472-4.68 12.28-7.02 20.183-7.02 8.024 0 14.71 2.34 20.06 7.02 5.349 4.68 8.389 10.715 8.997 18.106.365 5.789.365 11.7 0 17.488-.608 7.391-3.648 13.427-8.998 18.106zm-7.172-33.009c-.363-7.02-5.229-11.946-12.887-11.946-7.417 0-12.402 4.68-13.01 11.946a69.483 69.483 0 0 0 0 12.318c.608 7.266 5.593 11.946 13.01 11.946 7.416 0 12.4-4.68 12.887-11.946a69.326 69.326 0 0 0 0-12.318z"/></svg></div></div><script>"/login"===window.location.pathname&&-1===document.cookie.indexOf("VIEW=")?document.getElementById("login").classList.remove("hide"):document.getElementById("navbar").classList.remove("hide"),document.querySelector(".__splash.root").id="splash"</script></div><script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Symbol,fetch,Intl.~locale.en&amp;unknown=polyfill"></script><script src="https://apis.google.com/js/client.js" async></script><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDteWPK1-k97egIjYcX8-Btt8SpRsHit50&libraries=places" async></script><script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src="https://www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga"),ga("create","","auto")</script><script>!function(e,t,a,n,g){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var m=t.getElementsByTagName(a)[0],r=t.createElement(a);r.async=!0,r.src="https://www.googletagmanager.com/gtm.js?id=GTM-5XLW75",m.parentNode.insertBefore(r,m)}(window,document,"script","dataLayer")</script><script>!function(){function t(){var t=a.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://widget.intercom.io/widget/s21m3m5m";var e=a.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}var e=window,n=e.Intercom;if("function"==typeof n)n("reattach_activator"),n("update",intercomSettings);else{var a=document,c=function(){c.c(arguments)};c.q=[],c.c=function(t){c.q.push(t)},e.Intercom=c,e.attachEvent?e.attachEvent("onload",t):e.addEventListener("load",t,!1)}}()</script><script type="text/javascript" src="https://assets-frontend.kalohq.ink/vendor.83e606c69fc5ae7aeb9b.js" crossorigin="anonymous"></script><script type="text/javascript" src="https://assets-frontend.kalohq.ink/allapps.commons.8395b1aa9666e3271c40.js" crossorigin="anonymous"></script><script type="text/javascript" src="https://assets-frontend.kalohq.ink/hermes.29bb236b97c128e8b6ee.js" crossorigin="anonymous"></script></body></html>

Что-то здесь следует отметить, что все теги script и link имеют crossorigin="anonymous". Также обратите внимание на теги предварительной загрузки и предварительной выборки.

Проблема в основном влияет на таблицы стилей, которые кажутся, но сценарии также были затронуты одинаково. Опять же очень странно, что кажется случайным выбором, какие активы сломаются и когда. Учитывая эти два факта, возможно, это даже основано на упорядочении ссылок в документе/порядке загрузки.

Несколько окончательных разъяснений, надеюсь, помогут:

Активы, поданные с облачного интерфейса перед s3 (см. заголовки ответов)
В этот момент не было отчетов/тестирования в браузерах, кроме хром, хотя можно, надеюсь, обновить это в ближайшее время
Все ресурсы script и таблицы стилей предварительно загружаются с помощью

Любая помощь или руководство по этой проблеме будет чрезвычайно оценена. На данный момент это довольно сложно!

Update:

Таким образом, нам удалось получить то, что, как представляется, постоянно работает, без каких-либо очевидных проблем. Трудно знать на 100% без времени из-за кажущегося спорадического/случайного характера проблемы. Мы изменили следующее:

Обход Cloudfront, чтобы напрямую ссылаться на активы в S3. Что может быть другим?
Установите access-control-max-age в -1, который отключает это. Мы не ожидаем, что это будет иметь какой-то эффект, потому что это должно только (спецификация чтения) влиять на запросы предварительной проверки, которые не встречаются для запросов GET.
Удалить теги ссылки предварительной загрузки/предварительной выборки.

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

Обратите внимание, что это решение оказалось неверным. См. Обновление 2.

Обновление 2:

У нас были дополнительные сообщения и события внутри компании после предыдущего развертывания, которые, по нашему мнению, обошли проблему. Один из них повлиял на предыдущее развертывание, так как проблема в том, что проблема сейчас наблюдается гораздо реже. Снова жесткое обновление исправляет все.

Проблема идентична описанной до сих пор, и до сих пор мы не видели из-за сбоя загрузки JS с момента первого появления - всегда кажется, что файл CSS не работает сейчас.

Обновление 3:

Некоторая довольно важная информация, о которой я не упоминал первоначально, - это изменение, которое произошло во время появления этой проблемы.

В прошлый понедельник мы выпустили репликатор пакетов, приведенный в действие webpack, что означает, что активы стали разделяться между развертываниями. Например, если выходной файл allapps.commons.HASH123.css не изменился между версиями v1 и v2, тогда мы можем использовать кеширование браузера.

Однако все же происходит то, что script загрузка этих ресурсов в S3 IS в настоящее время тупо загружает и переопределяет исходный файл. Мы были в предположении, что это изменение будет довольно безвредным, поскольку файл имеет одно и то же имя и содержание, но, возможно, это имеет некоторые неблагоприятные последствия?

Другим эффектом этого выпуска стало то, что теперь будет намного больше активов из-за агрессивного расщепления кода, Одно дело отметить, однако, что ни один из асинхронных блоков, похоже, не страдает от одной и той же проблемы (они используют jsonp afterall), и проблема заключается только в том, что ссылки на теги с помощью тегов <script> и <link>.

Вы можете найти артефакты сборки релиза PRIOR для разблокированного здесь. И найдите NEW build артефакты текущего активного релиза, в котором показаны редкие проблемы здесь. Вы также можете найти наши сценарии развертывания здесь

Все ресурсы можно найти на диске Google здесь.

Обновление 4:

Эта проблема все еще встречается и теперь сообщается об асинхронном куске, который загружается по требованию. Если посмотреть на время выполнения webpack, эти сценарии загружаются путем добавления на страницу нового тега script, снова с помощью crossorigin="anonymous".

Обновление 5:

В каждой сборке мы используем уникальную соль (версию выпуска) при хэшировании имен файлов. Это означает, что никакие активы не распределяются между сборками. Проблема продолжала сохраняться после этого выпуска.

Обновление 6:

Я загрузил файл .har, показывая эту проблему, возникающую в пользовательском сеансе.

Найдите следующую строку "url": "https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css", и просмотрите различные запросы, сделанные для этого актива. Вы увидите, что первые несколько из них прекрасны и имеют заголовки, которые вы ожидаете. Последнее вхождение (строка 32624) - это тот, который не удался.

{
    "startedDateTime": "2017-06-28T09:40:15.534Z",
    "time": 0,
    "request": {
      "method": "GET",
      "url": "https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css",
      "httpVersion": "unknown",
      "headers": [
        {
          "name": "Referer",
          "value": "https://kalohq.ink/account"
        },
        {
          "name": "Origin",
          "value": "https://kalohq.ink"
        },
        {
          "name": "DPR",
          "value": "2"
        },
        {
          "name": "User-Agent",
          "value": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36"
        }
      ],
      "queryString": [],
      "cookies": [],
      "headersSize": -1,
      "bodySize": 0
    },
    "response": {
      "status": 0,
      "statusText": "",
      "httpVersion": "unknown",
      "headers": [],
      "cookies": [],
      "content": {
        "size": 0,
        "mimeType": "x-unknown"
      },
      "redirectURL": "",
      "headersSize": -1,
      "bodySize": -1,
      "_transferSize": 0,
      "_error": ""
    },
    "cache": {},
    "timings": {
      "blocked": -1,
      "dns": -1,
      "connect": -1,
      "send": 0,
      "wait": 0,
      "receive": 0,
      "ssl": -1
    },
    "serverIPAddress": "",
    "pageref": "page_10"
  },

Обновление 7:

Итак, вчера вечером мы нажали изменение, которое везде использовало атрибут crossorigin="anonymous". До сих пор мы не видели, как проблема возникает (все еще ждут, учитывая характер проблемы), но видят некоторые интересные и неожиданные ответы от запросов, которые сейчас сделаны. Было бы здорово, если бы мы могли получить разъяснения о том, что именно происходит здесь. Я не думаю, что мы ожидали удаления crossorigin="anonymous", чтобы иметь такой эффект или даже понять, почему он был так сломан до того, как наш сервер настроен на отправку правильных заголовков и заголовка Vary.

Запрос от cli к s3, с заголовком Origin, заголовками откликов cors

curl -I 'https://s3.amazonaws.com/olympus.lystable.com/style.allapps.5ebcc4d28ec238a53f46d6c8e12900d1.css' -H 'Pragma: no-cache' -H 'Accept-Encoding: gzip, deflate, br' -H 'Accept-Language: en-GB,en-US;q=0.8,en;q=0.6' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/59.0.3071.109 Chrome/59.0.3071.109 Safari/537.36' -H 'Accept: text/css,*/*;q=0.1' -H 'Referer: https://asos.kalohq.com/categories' -H 'Connection: keep-alive' -H 'DPR: 1' -H 'Cache-Control: no-cache' -H "Origin: https://kalohq.com" --compressed
HTTP/1.1 200 OK
x-amz-id-2: kxOvBrYsKyZ42wGgJu8iyRZ8q6j5DHDC6QoK1xn2e8FO1wIEEVkxQ0JvGQTmwrN/Njf8EOlmLrE=
x-amz-request-id: DA8B5488D3A7EF73
Date: Thu, 13 Jul 2017 13:27:47 GMT
Last-Modified: Thu, 13 Jul 2017 11:30:50 GMT
ETag: "c765a0a215cb4c9a074f22c3863c1223"
Cache-Control: max-age=31556926
Content-Encoding: gzip
Accept-Ranges: bytes
Content-Type: text/css
Content-Length: 5887
Server: AmazonS3

Запросить мгновение спустя от cli снова до s3 с только заголовком происхождения. Теперь неожиданно возвращает все ожидаемые заголовки cors...

curl -H "Origin: https://kalohq.com" -I https://assets-frontend.kalohq.com/style.allapps.5ebcc4d28ec238a53f46d6c8e12900d1.css
HTTP/1.1 200 OK
Content-Type: text/css
Content-Length: 5887
Connection: keep-alive
Date: Thu, 13 Jul 2017 13:33:09 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: -1
Last-Modified: Thu, 13 Jul 2017 11:30:50 GMT
ETag: "c765a0a215cb4c9a074f22c3863c1223"
Cache-Control: max-age=31556926
Content-Encoding: gzip
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
Age: 69
X-Cache: Hit from cloudfront
Via: 1.1 a19c66da9b402e0bee3fd29619661850.cloudfront.net (CloudFront)
X-Amz-Cf-Id: 3wQ7Z6EaAcMscGirwsYVi1M_rvoc1fbI034QY4QZd6IqmlRzLRllEg==

Обновление 8:

Удаление тегов crossorigin="anonymous" устраняет проблему. Исследование того, почему это внезапно стало проблемой с этой версией, продолжается, так как раньше у нас был этот атрибут в тегах script.

Все ресурсы, полезные в этом расследовании, можно найти на диске Google здесь.

Ответ 1

https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css возвращает заголовки CORS, когда присутствует заголовок "Origin" (который отправляется с запросом CORS, но не является регулярным запросы).

Вот что происходит:

Пользователь извлекает CSS как часть запроса no-CORS (например, <link rel="stylesheet">). Это кэшируется из-за заголовка Cache-Control.
Пользователь извлекает CSS как часть запроса CORS. Ответ исходит из кеша.
Ошибка CORS, нет заголовка Access-Control-Allow-Origin.

Здесь сервер неисправен, он должен использовать заголовок Vary, чтобы указать его изменения ответа в зависимости от заголовка Origin (и других). Он отправляет этот заголовок в ответ на запросы CORS, но он также должен отправлять его в ответ на запросы, отличные от CORS.

Chrome здесь несколько виноват, так как он должен использовать режим учетных данных для запроса как часть ключа кэширования, поэтому несертифицированный запрос (например, отправленный fetch()) не должен соответствовать элементам в кэш, которые были запрошены с учетными данными. Я думаю, что есть другие браузеры, которые ведут себя как Chrome здесь, но Firefox этого не делает.

Однако, поскольку вы используете CDN, вы не можете полагаться на браузеры, чтобы получить это право, поскольку кеширование может все еще происходить на CDN. Добавление правильного заголовка Vary является правильным исправлением.

tl; dr: добавьте следующий заголовок ко всем вашим ответам, которые поддерживают CORS:

Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method

Ответ 2

Я могу пролить немного света на то, как это случилось с нами. Azure CDN (который мы используем) не поддерживает заголовки Vary: прямо сейчас. Пока что так плохо. Но теперь мы используем атрибут crossorigin script, который - и это интересная вещь - не поддерживается некоторыми браузерами.

Если теперь такой браузер приходит на наш сайт, он не отправляет источник: потому что он не понимает атрибут "crossorigin". Если позже приходит кто-то, кто это понимает, он отправит исходное сообщение: → Ошибка CORS, потому что первый ответ кэшируется.

Гадкий.