某些用户有时不会加载CSS，这可能是由于跨源资源共享

时间：2016-11-08 12:45:35

标签： css angularjs google-chrome cross-domain

我们正在开发一个单页webapp应用程序，使用Angular JS 1.5，在Heroku上托管的Django 1.7，以及在Cloudfront上托管的资源。

有时一些用户体验我们的css没有被加载。硬刷新解决了这个问题。我们每周部署一个新版本的应用程序，但问题重新发生的时刻并非总是如此。 属性CSS stylesheet from origin 'https://xxx.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://app.foobar.com' is therefore not allowed access. XMLHttpRequest cannot load https://xxx.cloudfront.net/vendor/vendor.f2b1f43b27a2.css. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://app.foobar.com' is therefore not allowed access. 已添加到 base.html 中我们的css的链接标记中。

我们的用户主要使用Chrome（Windows和Linux），所以我不能说这个问题是否也出现在其他浏览器中。

控制台中的错误 

'Provisional headers are shown'

但是带有请求的网络标签显示原始标题已存在但有警告：chrome://net-internals

"CAUTION: provisional headers are shown" in Chrome debugger表示可能是浏览器插件阻止了请求，因此我在“事件”标签中查看了Request URL:https://xxx.cloudfront.net/vendor/vendor.f2b1f43b27a2.css Request Method:GET Status Code:200 OK (from cache) Remote Address:54.230.15.113:443 Response Headers Age:16460 Cache-Control:max-age=1314000 Content-Encoding:gzip Content-Type:text/css Date:Tue, 04 Oct 2016 07:03:31 GMT Expires:Fri, 27 Sep 2041 16:39:47 GMT Last-Modified:Mon, 03 Oct 2016 16:41:26 GMT Server:AmazonS3 Vary:Accept-Encoding Via:1.1xyz.cloudfront.net (CloudFront) X-Amz-Cf-Id:YQwFzOSQ2Be1khH0eHi4wwYpgtj8Q3Y7C_ylqwDfULjEMG9tSuFVmw== X-Cache:Hit from cloudfront Request Headers Provisional headers are shown Origin:https://app.foobar.com Referer:https://app.foobar.com/ User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/52.0.2743.116 Chrome/52.0.2743.116 Safari/537.36 。起初我有一些（可能的）阻塞插件我禁用了。

请求 

347949: URL_REQUEST
https://xxx.cloudfront.net/vendor/vendor.f2b1f43b27a2.css
Start Time: 2016-10-04 14:17:03.743

t=4656 [st= 0] +REQUEST_ALIVE  [dt=51]
t=4658 [st= 2]    URL_REQUEST_DELEGATE  [dt=0]
t=4658 [st= 2]   +URL_REQUEST_START_JOB  [dt=14]
                  --> load_flags = 33024 (MAYBE_USER_GESTURE | VERIFY_EV_CERT)
                  --> method = "GET"
                  --> priority = "HIGHEST"
                  --> url = "https://xxx.cloudfront.net/vendor/vendor.f2b1f43b27a2.css"
t=4659 [st= 3]      URL_REQUEST_DELEGATE  [dt=0]
t=4659 [st= 3]      HTTP_CACHE_GET_BACKEND  [dt=0]
t=4659 [st= 3]      HTTP_CACHE_OPEN_ENTRY  [dt=13]
t=4672 [st=16]      HTTP_CACHE_ADD_TO_ENTRY  [dt=0]
t=4672 [st=16]      HTTP_CACHE_READ_INFO  [dt=0]
t=4672 [st=16]      URL_REQUEST_DELEGATE  [dt=0]
t=4672 [st=16]      URL_REQUEST_FILTERS_SET
                    --> filters = "FILTER_TYPE_GZIP"
t=4672 [st=16]   -URL_REQUEST_START_JOB
t=4672 [st=16]    URL_REQUEST_DELEGATE  [dt=2]
t=4674 [st=18]    HTTP_CACHE_READ_DATA  [dt=8]
t=4685 [st=29]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                  --> byte_count = 32768
t=4686 [st=30]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                  --> byte_count = 32768
t=4690 [st=34]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                  --> byte_count = 32768
t=4694 [st=38]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                  --> byte_count = 32768
t=4696 [st=40]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                  --> byte_count = 32768
t=4698 [st=42]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                  --> byte_count = 32768
t=4699 [st=43]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                  --> byte_count = 6170
t=4700 [st=44]    HTTP_CACHE_READ_DATA  [dt=1]
t=4701 [st=45]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                  --> byte_count = 32768
t=4701 [st=45]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                  --> byte_count = 32768
t=4703 [st=47]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                  --> byte_count = 32768
t=4706 [st=50]    CANCELLED
t=4707 [st=51] -REQUEST_ALIVE

事件 

349289: URL_REQUEST
https://xxx.cloudfront.net/vendor/vendor.f2b1f43b27a2.css
Start Time: 2016-10-04 14:23:14.081

t=205845 [st=  0] +REQUEST_ALIVE  [dt=132]
t=205845 [st=  0]    URL_REQUEST_DELEGATE  [dt=0]
t=205845 [st=  0]   +URL_REQUEST_START_JOB  [dt=43]
                     --> load_flags = 33025 (MAYBE_USER_GESTURE | VALIDATE_CACHE | VERIFY_EV_CERT)
                     --> method = "GET"
                     --> priority = "HIGHEST"
                     --> url = "https://xxx.cloudfront.net/vendor/vendor.f2b1f43b27a2.css"
t=205846 [st=  1]      URL_REQUEST_DELEGATE  [dt=0]
t=205846 [st=  1]      HTTP_CACHE_GET_BACKEND  [dt=0]
t=205846 [st=  1]      HTTP_CACHE_OPEN_ENTRY  [dt=7]
t=205853 [st=  8]      HTTP_CACHE_ADD_TO_ENTRY  [dt=1]
t=205854 [st=  9]      HTTP_CACHE_READ_INFO  [dt=8]
t=205863 [st= 18]      URL_REQUEST_DELEGATE  [dt=0]
t=205863 [st= 18]     +HTTP_STREAM_REQUEST  [dt=16]
t=205863 [st= 18]        HTTP_STREAM_REQUEST_STARTED_JOB
                         --> source_dependency = 349307 (HTTP_STREAM_JOB)
t=205879 [st= 34]        HTTP_STREAM_REQUEST_BOUND_TO_JOB
                         --> source_dependency = 349307 (HTTP_STREAM_JOB)
t=205879 [st= 34]     -HTTP_STREAM_REQUEST
t=205879 [st= 34]     +HTTP_TRANSACTION_SEND_REQUEST  [dt=0]
t=205879 [st= 34]        HTTP_TRANSACTION_SEND_REQUEST_HEADERS
                         --> GET /vendor/vendor.f2b1f43b27a2.css HTTP/1.1
                             Host: xxx.cloudfront.net
                             Connection: keep-alive
                             Cache-Control: max-age=0
                             Origin: https://app.foobar.com
                             User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/52.0.2743.116 Chrome/52.0.2743.116 Safari/537.36
                             Accept: text/css,*/*;q=0.1
                             DNT: 1
                             Referer: https://app.foobar.com/
                             Accept-Encoding: gzip, deflate, sdch, br
                             Accept-Language: en-US,en;q=0.8,nl;q=0.6
                             If-Modified-Since: Mon, 03 Oct 2016 16:41:26 GMT
t=205879 [st= 34]     -HTTP_TRANSACTION_SEND_REQUEST
t=205879 [st= 34]     +HTTP_TRANSACTION_READ_HEADERS  [dt=8]
t=205879 [st= 34]        HTTP_STREAM_PARSER_READ_HEADERS  [dt=7]
t=205886 [st= 41]        HTTP_TRANSACTION_READ_RESPONSE_HEADERS
                         --> HTTP/1.1 304 Not Modified
                             Connection: keep-alive
                             Date: Tue, 04 Oct 2016 12:23:13 GMT
                             Access-Control-Allow-Origin: https://app.foobar.com
                             Access-Control-Allow-Methods: GET, HEAD
                             Access-Control-Max-Age: 600
                             Access-Control-Allow-Credentials: true
                             Cache-Control: max-age=1314000
                             Expires: Fri, 20 Sep 2041 15:55:26 GMT
                             Server: AmazonS3
                             Vary: Accept-Encoding,Origin,Access-Control-Request-Headers,Access-Control-Request-Method
                             Age: 19823
                             X-Cache: Hit from cloudfront
                             Via: 1.1 e1199ec506dcf179c3e277ddd6c51498.cloudfront.net (CloudFront)
                             X-Amz-Cf-Id: wLxxeqDY8Jis1aua46vmQAyt-RO4UOmyK0ac8Qd4i0EOxxMB5WDaQQ==
t=205887 [st= 42]     -HTTP_TRANSACTION_READ_HEADERS
t=205887 [st= 42]      HTTP_CACHE_WRITE_INFO  [dt=0]
t=205888 [st= 43]      URL_REQUEST_DELEGATE  [dt=0]
t=205888 [st= 43]      URL_REQUEST_FILTERS_SET
                       --> filters = "FILTER_TYPE_GZIP"
t=205888 [st= 43]   -URL_REQUEST_START_JOB
t=205888 [st= 43]    URL_REQUEST_DELEGATE  [dt=3]
t=205891 [st= 46]    HTTP_CACHE_READ_DATA  [dt=6]
t=205897 [st= 52]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205898 [st= 53]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205906 [st= 61]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205907 [st= 62]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205908 [st= 63]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205917 [st= 72]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205918 [st= 73]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 6170
t=205922 [st= 77]    HTTP_CACHE_READ_DATA  [dt=3]
t=205925 [st= 80]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205925 [st= 80]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205926 [st= 81]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205928 [st= 83]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205929 [st= 84]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205930 [st= 85]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205931 [st= 86]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205933 [st= 88]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205934 [st= 89]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 25314
t=205935 [st= 90]    HTTP_CACHE_READ_DATA  [dt=12]
t=205948 [st=103]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 28672
t=205948 [st=103]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205972 [st=127]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205972 [st=127]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205975 [st=130]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205976 [st=131]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 32768
t=205977 [st=132]    URL_REQUEST_JOB_FILTERED_BYTES_READ
                     --> byte_count = 22121
t=205977 [st=132]    HTTP_CACHE_READ_DATA  [dt=0]
t=205977 [st=132] -REQUEST_ALIVE

但是没有加载css（取消）。

经过硬刷新后，事件如下：

DataContextChanged

css已成功加载，并且每次连续软刷新都会加载。

为什么这个问题不规则发生的任何建议以及我们可以采取哪些措施来解决这个问题或者需要调查的一些指示？

0 个答案:

没有答案
相关问题
最新问题