browser - सीओआरएस पर कैशिंग प्रभाव: अनुरोधित संसाधन पर 'पहुंच-नियंत्रण-अनुमति-उत्पत्ति' शीर्षलेख मौजूद नहीं है




amazon-s3 webpack (2)

इस मुद्दे का संक्षिप्त संस्करण हम सामान्य कॉरस त्रुटि देख रहे हैं ( x has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ) हालांकि हम बिल्कुल निर्दिष्ट शीर्षलेख भेज रहे हैं । अनुरोधों के साथ शुरू करने के लिए ठीक है, हालांकि एन (पैटर्न अनिश्चित) समय के बाद SOME (HTML फ़ाइल में संदर्भित एक यादृच्छिक 1 या 2 संपत्तियों के अलावा इसके लिए कोई वास्तविक पैटर्न नहीं) अनुरोध अचानक विफल होने लगेंगे। हार्ड रीफ्रेश या कैश अक्षम करने के साथ, समस्या हल हो जाती है।

हम सोच रहे हैं कि कैशिंग इस मामले में सीओआरएस को कैसे प्रभावित कर सकती है? या यदि मुद्दा कहीं और है?

हम जो देखते हैं वह संपत्ति पहले उदाहरण में ठीक हो जाती है।

ब्राउजर ( क्रोम , कहीं और परीक्षण नहीं किया गया) का एक कर्ल प्रतिनिधित्व यहां सर्वर पर भेजता है ( एस 3 के सामने क्लाउडफ़्रंट ):

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.

इस बिंदु पर यदि आप कैश को रीफ्रेश या अक्षम करते हैं और पृष्ठ को फिर से लोड करते हैं तो सब कुछ काम पर वापस चला जाता है। यही कारण है कि हम इस बिंदु पर सीओआरएस के साथ खेल रहे ब्राउज़र कैशिंग व्यवहार पर इशारा कर रहे हैं।

इन संपत्तियों को लोड करने वाली 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 और link टैग में crossorigin="anonymous" । प्रीलोड और प्रीफेच टैग भी ध्यान दें।

यह मुद्दा ज्यादातर स्टाइलशीट को प्रभावित करता है, लेकिन ऐसा लगता है कि स्क्रिप्ट भी उसी तरह से प्रभावित हुई हैं। फिर यह वास्तव में अजीब बात है कि ऐसा लगता है कि संपत्तियां तोड़ने लगती हैं और कब। इन दो तथ्यों को ध्यान में रखते हुए शायद यह दस्तावेज़ / लोड ऑर्डर में संदर्भ क्रम पर भी आधारित है।

आशा करने के लिए उम्मीद है कि कुछ अंतिम स्पष्टीकरण:

  • एस 3 के सामने क्लाउडफ्रंट से संपत्तियां मिलीं (प्रतिक्रिया शीर्षलेख देखें)
  • इस बिंदु पर क्रोम के अलावा अन्य ब्राउज़रों में रिपोर्ट / परीक्षण नहीं था, हालांकि उम्मीद है कि जल्द ही उस पर अपडेट हो सकता है
  • सभी स्क्रिप्ट और स्टाइलशीट संपत्तियों का उपयोग करके प्रीलोड किया जाता है

इस मुद्दे के साथ किसी भी मदद या मार्गदर्शन की सराहना की जा रही है। इस समय यह बहुत अवरुद्ध है!

अद्यतन करें:

इसलिए हमने किसी भी स्पष्ट मुद्दे के बिना लगातार काम करने के लिए प्रतीत होता है। इस मुद्दे की प्रतीत होता है कि प्रतीत होता है कि इस मुद्दे की प्रतीत होता है कि यादृच्छिक / यादृच्छिक प्रकृति के कारण 100% के लिए मुश्किल है। हमने जो बदल दिया वह निम्नलिखित था:

  • एस 3 में सीधे संपत्तियों का संदर्भ देने के लिए बाईपास क्लाउडफ़्रंट। क्या अलग हो सकता है?
  • access-control-max-age को -1 access-control-max-age सेट करें जो इसे अक्षम करता है। हम इस पर कोई असर नहीं होने की उम्मीद करेंगे क्योंकि यह केवल (पढ़ना जा सकता है) प्रीफलाइट अनुरोधों को प्रभावित करेगा जो जीईटी अनुरोधों के लिए नहीं होते हैं।
  • प्रीलोड / प्रीफेच लिंक टैग हटाएं।

अब हम अपराधियों के रूप में इनमें से एक या कॉम्बो को अलग करने और अलग करने के लिए और परीक्षण कर रहे हैं। इसके बाद हम वहां क्या हो रहा है में आगे खोद सकते हैं।

इस मुद्दे को हल करने के मुद्दे को अब गलत साबित कर दिया गया है। अद्यतन 2 देखें।

अद्यतन 2:

पिछले रोलआउट के बाद हमने इस मुद्दे के बारे में और रिपोर्टें और घटनाएं सामने आई हैं, जिन्हें हमने इस मुद्दे को छोड़ दिया था। पिछले रोलआउट को प्रभावित करने वाला एक यह था कि अब मुद्दा बहुत कम देखा जाता है। फिर एक कठिन ताज़ा सब कुछ ठीक करता है।

यह मुद्दा अभी भी पहले वर्णित जैसा है और अब तक हमने पहली बार जेएस को पहली घटना के बाद लोड करने में विफलता नहीं देखी है - हमेशा एक सीएसएस फ़ाइल विफल होने लगती है।

अद्यतन 3:

कुछ महत्वपूर्ण सूचनाओं का मैंने मूल रूप से उल्लेख नहीं किया है, यह परिवर्तन उस समय हुआ जब इस मुद्दे ने खुद को पेश करना शुरू कर दिया था।

पिछले सोमवार को हमने एक बंडल रिफैक्टर जारी किया, जिसे webpack द्वारा संचालित किया गया था जिसका मतलब है कि संपत्तियों को तैनाती के बीच साझा किया गया था। उदाहरण के लिए यदि आउटपुट फ़ाइल allapps.commons.HASH123.css रिलीज v1 और v2 के बीच नहीं बदली तो विचार यह है कि हम ब्राउज़र कैशिंग का लाभ उठा सकते हैं।

हालांकि अभी भी ऐसा होता है कि एस 3 में इन संपत्तियों को अपलोड करने वाली स्क्रिप्ट वर्तमान में मूल फ़ाइल अपलोड और ओवरराइड कर रही है। हम इस धारणा के तहत थे कि यह परिवर्तन बहुत हानिकारक होगा क्योंकि फ़ाइल एक ही नाम और सामग्री है लेकिन शायद इसका कुछ प्रतिकूल प्रभाव पड़ा है?

इस रिलीज का एक अन्य प्रभाव यह था कि अब आक्रामक कोड विभाजन के कारण बहुत अधिक संपत्तियां होंगी। यद्यपि यहां ध्यान देने योग्य एक बात यह है कि एसिंक भाग में से कोई भी एक ही समस्या से पीड़ित नहीं लगता है (वे बाद में jsonp का उपयोग कर रहे हैं) और यह मुद्दा केवल <script> और <link> टैग के माध्यम से उन संपत्ति संदर्भों के साथ है।

आप रिहाई रिलीज के लिए रिलीज प्राइवेट के निर्माण कलाकृतियों को here । और वर्तमान सक्रिय रिलीज के नए निर्माण कलाकृतियों को here कमजोर मुद्दों को दिखाते हुए खोजें। आप here हमारी तैनाती स्क्रिप्ट भी पा सकते here

सभी संसाधन here Google ड्राइव पर पाए जा सकते here

अद्यतन 4:

यह समस्या अभी भी हो रही है और अब एक एसिंक चंक पर रिपोर्ट की गई है जो ऑन-डिमांड लोड है। वेबपैक रनटाइम को देखते हुए इन स्क्रिप्ट को पृष्ठ पर एक नया स्क्रिप्ट टैग जोड़कर लोड किया जाता है, फिर crossorigin="anonymous"

अद्यतन 5:

फ़ाइल निर्माण को हश करते समय हम प्रत्येक निर्माण पर अब एक अद्वितीय नमक (रिलीज़ संस्करण) का उपयोग करते हैं। इसका मतलब है कि निर्माण के बीच कोई संपत्ति साझा नहीं की जाती है। इस रिलीज के बाद यह मुद्दा जारी रहा है।

अद्यतन 6:

मैंने एक .har फ़ाइल अपलोड की है जो इस समस्या को उपयोगकर्ता सत्र पर दिखाई दे रही है।

निम्न स्ट्रिंग "url": "https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css", लिए खोजें "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 हेडर भेजने के लिए सेटअप है।

क्ली से एस 3 तक, मूल हेडर के साथ अनुरोध, कोई कॉर्स प्रतिक्रिया शीर्षलेख नहीं

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

क्लासिक से फिर से मूल हेडर के साथ एक पल बाद में s3 से अनुरोध करें। अब अचानक सभी अपेक्षित कोर हेडर वापस देता है ...

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 Google ड्राइव पर पाए जा सकते here


मैं थोड़ा सा प्रकाश डाल सकता हूं कि यह हमारे साथ कैसे हुआ। Azure सीडीएन (जो हम उपयोग करते हैं) Vary का समर्थन नहीं करता है: अभी शीर्षलेख। अब तक इतना बुरा है। लेकिन अब हम स्क्रिप्ट क्रॉसोरिगिन विशेषता का उपयोग करते हैं - और यह दिलचस्प बात है - कुछ ब्राउज़रों द्वारा समर्थित नहीं है।

यदि अब ऐसा ब्राउज़र हमारी साइट पर आता है, तो यह मूल नहीं भेजता है: क्योंकि यह "क्रॉसोरिगिन" विशेषता को समझ में नहीं आता है। यदि बाद में कोई दूसरा आता है जो इसे समझता है, तो यह मूल भेज देगा: -> CORS त्रुटि क्योंकि पहली प्रतिक्रिया कैश की जाती है।

बदसूरत।


वेबपैक पर हमारे जेएस माइग्रेट करते समय हमने एक ही समस्या का अनुभव किया।

हमारा सेटअप समान है:

  • तैनाती के दौरान संपत्ति एस 3 बाल्टी पर अपलोड की जाती है
  • बाल्टी क्लाउडफ़्रंट मूल के रूप में सेट है

वेबपैक में माइग्रेट करते समय, हम एयरब्रैक को बेहतर त्रुटि रिपोर्टिंग के लिए जेएस स्रोतमैप का लाभ लेना चाहते थे। त्रुटियों को ठीक तरह से crossorigin="anonymous" अनुमति देने के लिए, crossorigin="anonymous" विशेषता स्क्रिप्ट टैग पर सेट की जानी चाहिए। कारण यहां बताया गया है: https://blog.sentry.io/2016/05/17/what-is-script-error.html

समस्या का एक हिस्सा यह था कि सीओआरएस प्रतिक्रिया शीर्षलेख कभी-कभी वापस आते थे, कभी-कभी ब्राउज़र में सीओआरएस त्रुटि को ट्रिगर नहीं करते थे। मिस अनुरोध करने वाले पहले ग्राहक अनुरोध के आधार पर क्लाउडफ़्रंट सर्वर सीओआरएस हेडर के साथ या उसके बिना प्रतिक्रिया को कैश कर रहे थे।

तो दो संभावित परिणाम:

  1. पहला क्लाइंट मूल अनुरोध हेडर => क्लाउडफ़्रंट सर्वर को कोरस हेडर के बिना प्रतिक्रिया कैश नहीं करता है।
  2. पहला क्लाइंट मूल अनुरोध हेडर => क्लाउडफ़्रंट सर्वर को सीओआरएस हेडर के बिना प्रतिक्रिया कैश करता है।

इससे समस्या यह यादृच्छिक थी कि यह यादृच्छिक था, लेकिन यह केवल रेस हालत (कैसे पहला ग्राहक अनुरोध करता था) और अलग-अलग क्लाउडफ़्रंट सर्वर पर कैश किए गए विभिन्न शीर्षलेखों का मामला था: समय और स्थान निर्भर। उस तथ्य को जोड़ें कि ब्राउज़र इन गलत शीर्षकों को कैश कर सकता है ...

इसलिए आपको क्लाउड्रंट के वितरण व्यवहार को सही तरीके से कॉन्फ़िगर करने की आवश्यकता है:

  • प्रीफलाइट (विकल्प) अनुरोधों को अनुमति दें और कैश करें
  • सीओआरएस अनुरोध शीर्षकों पर कैश का आधार (मूल, एक्सेस-कंट्रोल-अनुरोध-शीर्षलेख, एक्सेस-कंट्रोल-अनुरोध-विधि)

यहां कॉन्फ़िगरेशन है जो हमारी समस्या का समाधान करता है।

एस 3 बाल्टी / अनुमतियां / सीओआरएस विन्यास:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>300</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

क्लाउडफ़्रंट वितरण / व्यवहार संपादित करें:

अब हम आपके जैसी समस्या का अनुभव करते हैं, क्योंकि हमने अभी हमारे सीएसएस को वेबपैक में माइग्रेट किया है। हम सीएसएस फ़ाइलों के लिए और भी अधिक स्पोरैडिक कॉरस त्रुटियों का सामना कर रहे हैं। हम <link rel="stylesheet" /> टैग पर crossorigin="anonymous" विशेषता को हटाने का प्रयास कर रहे हैं क्योंकि हमें सीएसएस फ़ाइलों के लिए त्रुटि ट्रैकिंग की आवश्यकता नहीं है।








cache-control