对 CORS 的缓存效果:请求的资源上不存在“Access-Control-Allow-Origin”标头

2024-03-02

这个问题的简短版本是我们看到典型的 CORS 错误(x has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.)但是我们绝对会发送指定的标头。请求一开始很好,但是在 n(模式未确定)时间后,某些(除了 html 文件中引用的随机 1 或 2 个资产之外没有真正的模式)请求将突然开始失败。通过硬刷新或禁用缓存,问题即可解决。

我们想知道在这种情况下缓存如何影响 CORS?或者问题是否出在其他地方?

我们看到的是资源在第一个实例中加载得很好。

这是浏览器的 cURL 表示(chrome,未在其他地方测试)发送到服务器(s3 前面的 cloudfront):

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

之后,您可以浏览该网站一段时间,刷新几次,一切都很好。

但随后您可能会刷新并突然在控制台中看到错误:

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="https://assets-frontend.kalohq.ink/favicon.ico" crossorigin="anonymous"><link href="https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css" rel="stylesheet" crossorigin="anonymous"><link href="https://assets-frontend.kalohq.ink/style.hermes.689f9795642815d4b8afd20e446a174d.css" rel="stylesheet" crossorigin="anonymous"><link rel="preload" href="https://assets-frontend.kalohq.ink/hermes.29bb236b97c128e8b6ee.js" as="script" crossorigin="anonymous"><link rel="preload" href="https://assets-frontend.kalohq.ink/style.hermes.689f9795642815d4b8afd20e446a174d.css" as="style" crossorigin="anonymous"><link rel="preload" href="https://assets-frontend.kalohq.ink/allapps.commons.8395b1aa9666e3271c40.js" as="script" crossorigin="anonymous"><link rel="preload" href="https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css" as="style" crossorigin="anonymous"><link rel="preload" href="https://assets-frontend.kalohq.ink/vendor.83e606c69fc5ae7aeb9b.js" as="script" crossorigin="anonymous"><link rel="preload" href="https://assets-frontend.kalohq.ink/core/styles/fonts/Fakt-Soft-Pro-SemiBold/FaktSoftPro-SemiBold.1901bce5eea18c64a60693e961585ba1.woff" as="font" crossorigin="anonymous"><link rel="preload" href="https://assets-frontend.kalohq.ink/core/styles/fonts/Fakt-Soft-Pro-Blond/FaktSoftPro-Blond.4ab21e2be2f31a0ab8d798a9c65f99c1.woff" as="font" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/hera.b69b80db056ad9c9389f.js" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/iris.834233a6fb064bf576a9.js" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/athena.5e6c5b01662cea2c8b1a.js" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/moment-timezone-data.8189aab661847dea1b73.chunk.js" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/style.hera.f00a272db8e5756775fb2632e67c1056.css" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/style.iris.1465dc22f4279c748a04c66f3b4494de.css" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/style.athena.6acb14c0d060121364c9a0cf3e6fa0ad.css" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/_/node_modules/@kalo/ui/icon/fonts/MaterialIcons/MaterialIcons-Regular.012cf6a10129e2275d79d6adac7f3b02.woff" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/core/assets/fonts/MaterialIcons-Regular.012cf6a10129e2275d79d6adac7f3b02.woff" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/_/node_modules/@kalo/ui/icon/fonts/MaterialIcons/MaterialIcons-Regular.570eb83859dc23dd0eec423a49e147fe.woff2" crossorigin="anonymous"><link rel="prefetch" href="https://assets-frontend.kalohq.ink/core/assets/fonts/MaterialIcons-Regular.570eb83859dc23dd0eec423a49e147fe.woff2" crossorigin="anonymous"></head><body><main id="app"><!--[if lt IE 8]>
  <p class="browserupgrade">You are using an outdated browser. Please <a href="http://browsehappy.com/">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 and link标签有crossorigin="anonymous"。另请注意 preload 和 prefetch 标签。

该问题似乎主要影响样式表,但脚本也以同样的方式受到影响。同样,它似乎随机选择哪些资产将在何时损坏,这确实很奇怪。考虑到这两个事实,也许它甚至基于文档/加载顺序中的参考顺序。

最后的一些澄清希望对您有所帮助:

  • 从 s3 前面的 cloudfront 提供的资产(请参阅响应标头)
  • 目前除 Chrome 之外还没有在浏览器中进行报告/测试,但希望很快就能更新
  • 所有脚本和样式表资源均使用预加载

对于此问题的任何帮助或指导将不胜感激。目前实在是太堵了!

Update:

因此,我们已经成功地获得了一个看似连续工作的构建,没有任何明显的问题。由于问题看似零星/随机,没有时间很难 100% 了解。我们改变的内容如下:

  • 绕过 Cloudfront 直接引用 S3 中的资产。有什么不同?
  • Set access-control-max-age to -1这会禁用此功能。我们不希望这会产生任何影响,因为这应该只会(阅读规范)影响预检请求,而 GET 请求不会发生这种情况。
  • 删除预加载/预取链接标签。

我们现在正在进行进一步的测试,试图找出罪魁祸首中的一个或多个。然后我们可以进一步挖掘那里发生的事情。

注意这一点solving这个问题现已被证明是不正确的。看Update 2.

更新2:

在上次推出后,我们收到了有关该问题的进一步报告和内部事件,我们认为这次推出绕过了该问题。之前的推出确实产生了一个影响,那就是这个问题现在出现的频率要低得多。再次硬刷新解决了一切。

该问题与之前描述的仍然相同,并且到目前为止,自第一次发生以来我们还没有亲眼目睹过加载 JS 的失败 - 现在似乎总是 CSS 文件失败。

更新3:

我最初没有提到的一些非常重要的信息是在这个问题开始出现时发生的变化。

上周一,我们发布了捆绑包重构,由webpack https://webpack.js.org/这意味着资产在部署之间共享。例如,如果输出文件allapps.commons.HASH123.cssv1 和 v2 版本之间没有变化,那么我们可以利用浏览器缓存。

然而仍然发生的是,脚本将这些资产上传到 S3IS目前正在愚蠢地上传并覆盖原始文件。我们假设此更改非常无害,因为文件具有相同的名称和内容,但这也许会产生一些不利影响?

此版本的另一个影响是,由于激进的做法,现在将会有更多的资产代码分割 https://webpack.js.org/guides/code-splitting/#components/sidebar/sidebar.jsx。不过,这里需要注意的一件事是,所有异步块似乎都没有遇到相同的问题(毕竟它们使用的是 jsonp),并且问题仅在于通过以下方式引用的资产<script> and <link> tags.

您可以在重大版本之前找到该版本的构建工件here https://drive.google.com/open?id=0ByRPB4t3N6FjMjNId19tR1ItWGM。并找到当前活动版本的新构建工件,显示不常见的问题here https://drive.google.com/open?id=0ByRPB4t3N6FjZDVJcUJHVXR2azA。您还可以找到我们的部署脚本here https://drive.google.com/open?id=0ByRPB4t3N6FjN01CSUpIMzhFMFE

所有资源都可以在谷歌驱动器上找到here https://drive.google.com/open?id=0ByRPB4t3N6FjZEVSaTZqOUxRZTQ.

更新4:

此问题仍然存在,并且现已在按需加载的异步块上报告。查看 webpack 运行时,这些脚本是通过向页面添加新的脚本标签来加载的,再次使用crossorigin="anonymous".

更新5:

现在,在每个版本中,我们在散列文件名时使用唯一的盐(发布版本)。这意味着构建之间不会共享任何资产。此版本发布后,该问题仍然存在。

更新6:

我上传了一个.har file https://drive.google.com/open?id=0ByRPB4t3N6FjdnZ3ZWZBZ0pPdGM显示用户会话中发生的此问题。

搜索以下字符串"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 header.

从 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"标签已经解决了这个问题。由于我们在脚本标签上有此属性,因此正在调查为什么这突然开始成为此版本的问题before.


本次调查中有用的所有资源都可以在谷歌驱动器上找到here https://drive.google.com/open?id=0ByRPB4t3N6FjZEVSaTZqOUxRZTQ.


https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css仅当存在“Origin”标头(与 CORS 请求一起发送,但不是常规请求时发送)时,才返回 CORS 标头。

发生的情况如下:

  1. 用户获取 CSS 作为无 CORS 请求的一部分(例如,<link rel="stylesheet">)。此缓存是由于Cache-Control header.
  2. 用户获取 CSS 作为 CORS 请求的一部分。响应来自缓存。
  3. CORS检查失败,否Access-Control-Allow-Origin header.

这里服务器有问题,应该使用Vary标头指示其响应变化取决于Origin标题(和其他)。它发送此标头来响应 CORS 请求,但它也应该发送它来响应非 CORS 请求。

Chrome在这里有些问题,因为它应该使用请求的凭据模式作为缓存密钥的一部分,因此非凭据请求(例如由fetch()) 不应与缓存中使用凭据请求的项目匹配。我认为还有其他浏览器的行为与 Chrome 类似,但 Firefox 却不然。

但是,由于您使用的是 CDN,因此您不能依赖浏览器来实现此目的,因为缓存可能仍然发生在 CDN 上。添加正确的Vary标题是正确的修复。

tl;dr: 将以下标头添加到all您支持 CORS 的回复:

Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

对 CORS 的缓存效果:请求的资源上不存在“Access-Control-Allow-Origin”标头 的相关文章

随机推荐