2017-06-28 59 views
20

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

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

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

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 

और यह देखो के जवाब में हेडर:

यहाँ ब्राउज़र (क्रोम, कहीं और परीक्षण नहीं) क्या सर्वर को भेजता है (S3 के सामने CloudFront) के एक cURL प्रतिनिधित्व है जैसे:

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" है। प्रीलोड और प्रीफेच टैग भी ध्यान दें।

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

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

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

कोई मदद या इस मुद्दे के साथ मार्गदर्शन का उपयोग कर पहले से लोड कर रहे हैं बेहद appreci होने जा रहा है पैदा। इस समय यह बहुत अवरुद्ध है!

अद्यतन:

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

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

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

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

अद्यतन 2:

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

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

अद्यतन 3:

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

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

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

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

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

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

अद्यतन 4:

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

अद्यतन 5:

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

अद्यतन 6:

मैं एक .har file अपलोड कर दिया है इस मुद्दे को एक उपयोगकर्ता सत्र के समय घटने दिखा।

निम्न स्ट्रिंग "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 के लिए, एक उत्पत्ति हेडर के साथ, कोई 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 के लिए।

crossorigin="anonymous" टैग को हटाने समस्या सुलझा ली है: अब अचानक सब उम्मीद 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। इस रिलीज के साथ अचानक यह समस्या क्यों शुरू हो रही है, इस बारे में जांच चल रही है क्योंकि हमारे पास स्क्रिप्ट टैग पर से पहले यह विशेषता थी।


सभी इस जांच में कई उपयोगी संसाधन गूगल पर पाया जा सकता है ड्राइव here

+1

मैं इस कॉरस कैश मुद्दे से बहुत पहले नहीं चला था, मैं वापस खोजने की कोशिश करूंगा कि मैंने इसे आपके लिए कैसे हल किया। इस बीच, जहां तक ​​मुझे याद है, [यह क्रोम के लिए विशिष्ट है] (https://bugs.chromium.org/p/chromium/issues/detail?id=409090)। क्या आप इसकी पुष्टि कर सकते हैं? – Bigood

+0

यह पुष्टि कर सकता है कि हम जो देख रहे हैं @ बिगूड क्रोम केवल – Chrisui

+1

दुर्भाग्य से, ऐसा लगता है कि वे इसे ठीक नहीं करेंगे ([संबंधित समस्या देखें] (https://bugs.chromium.org/p/chromium/issues/detail?id = 426,089 # C29))। मैं अभी भी याद रखने की कोशिश करूंगा कि मैंने इससे बचने के लिए क्या किया था। – Bigood

उत्तर

3

https://assets-frontend.kalohq.ink/style.allapps.add899080acbbeed5bb6a7301d234b65.css केवल "मूल" हेडर मौजूद होने पर सीओआरएस हेडर लौटाता है (जिसे सीओआरएस अनुरोध के साथ भेजा जाता है, लेकिन नियमित अनुरोध नहीं)।

यहाँ क्या होता है:

  1. उपयोगकर्ता नो CORS अनुरोध के भाग के रूप में सीएसएस को हासिल करेगा (जैसे, <link rel="stylesheet">)। Cache-Control शीर्षलेख के कारण यह कैश।
  2. उपयोगकर्ता सीओआरएस अनुरोध के हिस्से के रूप में सीएसएस प्राप्त करता है। प्रतिक्रिया कैश से आता है।
  3. सीओआरएस चेक विफल रहता है, Access-Control-Allow-Origin शीर्षलेख।

सर्वर यहाँ की गलती है, यह Origin हैडर (और अन्य) के आधार पर अपनी प्रतिक्रिया में परिवर्तन का संकेत करने के Vary शीर्ष लेख का उपयोग करना चाहिए। यह सीओआरएस अनुरोधों के जवाब में यह हेडर भेजता है, लेकिन इसे गैर-सीओआरएस अनुरोधों के जवाब में भी भेजना चाहिए।

क्रोम कुछ हद तक गलती है, क्योंकि इसे कैशिंग कुंजी के हिस्से के रूप में अनुरोध के क्रेडेंशियल्स मोड का उपयोग करना चाहिए, इसलिए एक गैर-प्रमाणित अनुरोध (जैसे fetch() द्वारा भेजे गए) को कैश में आइटम से मेल नहीं करना चाहिए उनसे प्रमाण पत्र के साथ अनुरोध किया गया था। मुझे लगता है कि क्रोम की तरह व्यवहार करने वाले अन्य ब्राउज़र भी हैं, लेकिन फ़ायरफ़ॉक्स नहीं है।

हालांकि, चूंकि आप सीडीएन का उपयोग कर रहे हैं, इसलिए आप इस अधिकार को पाने के लिए ब्राउज़र पर भरोसा नहीं कर सकते हैं, क्योंकि कैशिंग अभी भी सीडीएन में हो सकती है। सही Vary शीर्षलेख जोड़ना सही है।

tl; डॉ:सब अपनी प्रतिक्रियाओं कि CORS समर्थन के लिए निम्न शीर्षलेख जोड़ें:

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

चीयर्स! वास्तव में मदद की सराहना करते हैं।यहां कुछ ऐसी चीजें हैं जो एक नज़र में काफी जोड़ नहीं रही हैं, इसलिए कोशिश करना और स्पष्टीकरण देना अच्छा होगा। मूल रूप से परीक्षण करते समय हमारे पास सीडीएन (ओपी में कॉपी किए गए शीर्षलेख) से प्रतिक्रियाओं में 'वरी' हेडर सेट होता है। हमने अब सीडीएन को छोड़ दिया है और एक ही समस्या हो रही है। वर्तमान में एस 3 से सीधे भेजे जाने वाले हेडर को सत्यापित करना। – Chrisui

+0

यह भी सोच रहा है कि आपकी अपेक्षित प्रभाव हमारी स्क्रिप्ट और लिंक से 'crossorigin =" अज्ञात "विशेषता को हटाने से क्या है? हमने कल शाम ऐसा किया और तब से इस मुद्दे को नहीं देखा है। – Chrisui

+1

'crossorigin =" अज्ञात "को हटाकर यह एक नो-कॉर्स अनुरोध करता है, इसलिए यह सीओआरएस हेडर के साथ या उसके बिना काम करेगा। हालांकि, यह सीओआरएस हेडर के बिना संस्करण को कैश करेगा, इसलिए उसी यूआरएल के बाद के सीओआरएस अनुरोध विफल हो जाएंगे। –

2

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

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

बदसूरत।

संबंधित मुद्दे