gpt4 book ai didi

browser - 缓存对 CORS : No 'Access-Control-Allow-Origin' header is present on the requested resource 的影响

转载 作者:行者123 更新时间:2023-12-04 15:35:47 30 4
gpt4 key购买 nike

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

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

我们看到的是 Assets 在第一个实例中加载良好。

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

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 的浏览器缓存行为。

加载这些 Assets 的 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>

这里需要注意的是所有 scriptlink标签有 crossorigin="anonymous" .还要注意 preload 和 prefetch 标签。

该问题主要影响样式表,但似乎脚本也受到了同样的影响。同样,它似乎随机选择哪些 Assets 将在何时中断,这真的很奇怪。考虑到这两个事实,它甚至可能基于文档/加载顺序中的引用顺序。

最后的一些澄清希望能有所帮助:
  • 从 s3 前面的 cloudfront 提供的 Assets (请参阅响应 header )
  • 目前还没有在 chrome 以外的浏览器中进行报告/测试,但有望很快更新
  • 所有脚本和样式表 Assets 都使用
  • 预加载

    任何有关此问题的帮助或指导将不胜感激。目前它非常阻塞!

    更新:

    因此,我们已经设法在没有任何明显问题的情况下进行了看似持续不断的构建。由于问题看似零星/随机的性质,没有时间很难知道 100%。我们更改的是以下内容:
  • 绕过 Cloudfront 直接引用 S3 中的 Assets 。有什么不同?
  • 套装access-control-max-age-1这禁用了这个。我们不希望这有任何影响,因为这只会(阅读规范)影响 GET 请求不会发生的预检请求。
  • 删除预加载/预取链接标签。

  • 我们现在正在做进一步的测试,试图将其中一个或多个组合作为罪魁祸首。然后我们可以进一步深入了解那里发生的事情。

    Note this solving the issue has now been proved incorrect. See Update 2.



    更新 2:

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

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

    更新 3:

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

    上周一我们发布了一个包重构,由 webpack 提供支持这意味着 Assets 在部署之间共享。例如,如果输出文件 allapps.commons.HASH123.css在版本 v1 和 v2 之间没有变化,那么我们的想法是我们可以利用浏览器缓存。

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

    此版本的另一个影响是,由于激进 code splitting 现在将有更多 Assets .不过这里要注意的一件事是,似乎没有一个异步块遇到同样的问题(毕竟他们使用的是 jsonp),问题仅在于通过 <script> 引用的那些 Assets 。和 <link>标签。

    您可以在突破性版本之前找到版本的构建工件 here .并找到显示不常见问题的当前事件版本的新构建工件 here .您还可以找到我们的部署脚本 here

    所有资源都可以在谷歌驱动器上找到 here .

    更新 4:

    此问题仍在发生,现在已在按需加载的异步块上报告。查看 webpack 运行时,这些脚本是通过向页面添加新的脚本标签来加载的,同样是 crossorigin="anonymous" .

    更新 5:

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

    更新 6:

    我上传了 .har file显示此问题发生在用户 session 中。

    搜索以下字符串 "url": "https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css",并查看为此 Assets 提出的各种请求。你会看到前几个很好,并且有你期望的标题。最后一次出现(第 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"有这样的效果,甚至理解为什么它之前如此 splinter ,因为我们的服务器设置为发送正确的 header 和 Vary标题。

    从 cli 到 s3 的请求,带有 Origin header ,没有 cors 响应 header
    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 请求仅带有 origin header 。现在突然返回所有预期的 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"标签解决了这个问题。因为我们之前在脚本标签上有这个属性,所以正在调查为什么这突然开始成为这个版本的问题。

    在本次调查中有用的所有资源都可以在谷歌驱动器上找到 here .

    最佳答案

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

    这是发生的事情:

  • 用户获取 CSS 作为无 CORS 请求的一部分(例如, <link rel="stylesheet"> )。此缓存由于 Cache-Control标题。
  • 用户获取 CSS 作为 CORS 请求的一部分。响应来自缓存。
  • CORS 检查失败,没有 Access-Control-Allow-Origin标题。

  • 服务器在这里有问题,应该使用 Vary header 指示其响应根据 Origin 而变化 header (和其他)。它发送这个头来响应 CORS 请求,但它也应该发送它来响应非 CORS 请求。

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

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

    tl;dr:将以下标题添加到支持 CORS 的所有响应中:
    Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method

    关于browser - 缓存对 CORS : No 'Access-Control-Allow-Origin' header is present on the requested resource 的影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44800431/

    30 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com