We are working on a single page webapp app using Angular JS 1.5, Django 1.7 hosted on Heroku with resources hosted on Cloudfront.
Sometimes some user experience that our css isn't being loaded. A hard refresh solves the problem. We weekly deploy a new version of the app, but that is not always the moment the problem re-occurs.
The attribute crossorigin="use-credentials" is added to the link tag to our css in base.html.
Our users mainly use Chrome (Windows & Linux), so I can't say if the problem is also present in other browsers.
Errors in the console
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.
But the network tab with the requests shows that origin header is present but with the warning: 'Provisional headers are shown'
"CAUTION: provisional headers are shown" in Chrome debugger suggests that possibly a browser plugin is blocking the request, so I looked at chrome://net-internals at the events tab. At first I had some (possible) blocking plugins which I disabled.
The request
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
The events
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
But the css isn't loaded (CANCELLED).
After a hard refresh, the events are as follows:
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
And the css is loaded successfully, and also for every successive soft refresh.
Any suggestions why this problem occurs irregular and what we can do to fix this or some pointers to investigate?
