I'm experiencing an issue with Chrome that I can't seem to fully understand, I'm curious if folks here have dealt with it before. This doesn't reproduce in Firefox. The steps are as follows:
Start incognito Chrome, navigate to https://foo.mysite.com and have the JS on the page make a GET ajax request to S3 for https://s3.amazonaws.com/mystuff/file.json . You get back a 200 response with:
HTTP/1.1 200 OK
x-amz-id-2: somestuffhere
x-amz-request-id: somestuffhere
Date: Tue, 14 Oct 2014 03:06:41 GMT
Access-Control-Allow-Origin: https://foo.mysite.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: max-age=86400
Content-Encoding: gzip
Last-Modified: Sun, 05 Oct 2014 00:29:53 GMT
ETag: "fe76607baa40a793eb3b3cbd373a3fb8"
Accept-Ranges: bytes
Content-Type: application/json
Content-Length: 5609
Server: AmazonS3
Open a second tab, navigate to https://bar.mysite.com and have its JS make a GET ajax request to S3 for the same file https://s3.amazonaws.com/mystuff/file.json . Get back the following 304 response:
HTTP/1.1 304 Not Modified
x-amz-id-2: somestuffhere
x-amz-request-id: somestuffhere
Date: Tue, 14 Oct 2014 03:06:58 GMT
Access-Control-Allow-Origin: https://bar.mysite.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: max-age=86400
Last-Modified: Sun, 05 Oct 2014 00:29:53 GMT
ETag: "fe76607baa40a793eb3b3cbd373a3fb8"
Server: AmazonS3
Open a third tab, navigate to https://foo.mysite.com (the first site) and repeat the same steps as in 1. Chrome kills the response for CORS reasons and reports the following:
XMLHttpRequest cannot load https://s3.amazonaws.com/mystuff/file.json. The 'Access-Control-Allow-Origin' header has a value 'https://bar.mysite.com' that is not equal to the supplied origin. Origin 'https://foo.mysite.com' is therefore not allowed access.
What's the story here? This doesn't reproduce in Firefox. In Firefox I'm happily getting a 304 in both steps 2 and 3, which I would expect to see in Chrome as well.
A temporary workaround for this issue in Chrome is to set Cache-Control: no-cache on the file in S3, but then I'm forcing our clients to be re-downloading that file for no good reason, so it's not a real solution.
Is this intended and documented behavior? Is this a bug with Chrome? Any other thoughts?
Looks like this is caused by Chromium issue 260239
I found this blog that help: Add Vary headers to S3
It helped by adding Vary headers to all XHR request.
I did run into a problem with html request (i.e. ) but I was able to overcome that by using hackround#2 described here:https://serverfault.com/a/856948
TL;DR of hack#2 is to use a "dummy" query string parameter that differs for HTML and XHR or is absent from one or the other. Example:
<img src="https://s3.png?x-request=html">
I just add a timestamp in request URL to force load the asset from S3 again, not from cache, such as xxxx?timestamp=yyyy
Related
Setup
I have a static site served by Nginx. I use Webpack to build the assets with a contenthash in the filename:
index.html
main.723f2b08bd448896ca78.js
main.18a850dffbe46cca9feb.css
When I edit my JavaScript code and redeploy the site, the root directory changes to:
index.html
main.08ddcf9a702a6772ce2d.js # <- new hash
main.18a850dffbe46cca9feb.css
Problem
When I open a new tab in Chrome, type my domain name, and press Enter - in the Network tab, I see that Chrome is still loading the old files:
Name Status Type Initiator Size Time
mydomain.com 200 document Other (disk cache) 4 ms
main.723f2b08bd448896ca78.js 200 script (index) (disk cache) 17 ms
main.18a850dffbe46cca9feb.css 200 stylesheet (index) (disk cache) 13 ms
When I click example.com, the HTML in Response includes the old script:
<script src="/main.723f2b08bd448896ca78.js"></script
Also, the Response Headers on index.html are outdated:
Content-Encoding: gzip
Content-Type: text/html
Date: Thu, 26 Jan 2023 09:21:31 GMT
ETag: W/"63d06108-202"
Last-Modified: Tue, 24 Jan 2023 22:51:52 GMT
X-DNS-Prefetch-Control: off
Furthermore, when I click on main.723f2b08bd448896ca78.js, the Response Headers are also out-of-date:
Accept-Ranges: bytes
Content-Length: 605458
Content-Type: application/javascript
Date: Thu, 26 Jan 2023 09:21:31 GMT
ETag: "63d06108-93d12"
Last-Modified: Tue, 24 Jan 2023 22:51:52 GMT
If I reload the page, Chrome loads the new files correctly. But if I then open a new tab again, type the domain, and press Enter - it still loads the old assets! This leaves me with a hard page reload (Ctrl + Shift + R) which finally resets the cache.
Expectation
When I load my site in Incognito I get the correct files as expected:
Name Status Type Initiator Size Time
mydomain.com 200 document Other 557 B 634 ms
main.08ddcf9a702a6772ce2d.js 200 script (index) 606 kB 1.28 s
main.18a850dffbe46cca9feb.css 200 stylesheet (index) 87.2 kB 497 ms
index.html Response:
<script src="/main.08ddcf9a702a6772ce2d.js"></script
index.html Response Headers:
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html
Date: Thu, 26 Jan 2023 10:33:44 GMT
ETag: W/"63d249c7-202"
Last-Modified: Thu, 26 Jan 2023 09:37:11 GMT
Transfer-Encoding: chunked
main.08ddcf9a702a6772ce2d.js Response Headers:
Accept-Ranges: bytes
Connection: keep-alive
Content-Length: 605595
Content-Type: application/javascript
Date: Thu, 26 Jan 2023 10:33:44 GMT
ETag: "63d249c7-93d9b"
Last-Modified: Thu, 26 Jan 2023 09:37:11 GMT
Question
I don't understand what I'm doing wrong - Nginx is returning new values for Etag and Last-Modified. The contenthash changes between deployments. Yet the JS file is still cached very aggressively. This problem happens to me and other people using the site. In this case, it caused a white screen of death, and I had to tell everyone to do a hard page reload (which is foreign and bewildering to the end users).
Is there a solution for this? I don't mind disk cache but how do I tell Chrome not to use it when the asset file changes? Is this an Nginx misconfiguration?
Thank you.
It's your job to tell the browser how long it can cache a resource. You do so by setting the Cache-Control response header (MDN). If you don't set it, the browser is free to decide for itself how long is appropriate. That seems to be what's happening in your case.
Simply set Cache-Control: no-cache on your index.html response header and this problem will go away. The page will still be cached by the browser, but the browser won't use it without first checking with the server to see if it's still current (that's what the ETag is for).
For your static resources, though, you should set a long cache time, since the whole purpose of versioning file names like that is to allow any given one to be immutable.
I have an S3 Bucket fronted with a Cloudfront CDN. In that bucket, I have some woff2 fonts that were automatically tagged with the content type octet-stream. When trying to load that font from a CSS file on a live production website, I get the following error:
Access to Font at 'https://cdn.example.com/fonts/my-font.woff2' from origin
'https://www.live-website.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://www.live-website.com' is therefore not allowed access.
The thing is that a curl reveals that the Access-Control-Allow-Origin is present:
HTTP/1.1 200 OK
Content-Type: binary/octet-stream
Content-Length: 98488
Connection: keep-alive
Date: Wed, 08 Aug 2018 19:43:01 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Last-Modified: Mon, 14 Aug 2017 14:57:06 GMT
ETag: "<redacted>"
Accept-Ranges: bytes
Server: AmazonS3
Age: 84847
X-Cache: Hit from cloudfront
Via: 1.1 <redacted>
X-Amz-Cf-Id: <redacted>
Everything is working fine in Firefox, so I guess that Chrome is doing an extra validation that blocks my font.
Turns out that the problem was actually with the Content-Type. As soon as I changed the content type to application/font-woff2 and invalidated the cache of these woff2 files, everything went through smoothly.
My problem with CORS and multi domain was that Cloudfront was taking in cache the first request so I had to select in Whitelist Headers the Origin option. And it works.
enter image description here
I am trying to inspect an HTTP request made in my browser with the chrome dev tools. I want to see the response but it seems to be empty (failed to load data), whereas the Content-Type is set to 4464326.
Below the HTTP response headers :
HTTP/1.1 200 OK
Last-Modified: Tue, 21 Jan 2014 12:08:30 GMT
ETag: "3ba731138c01f1ad6536bc1d4030cfdd"
Content-Type: audio/mpeg
Server: AmazonS3
Content-Length: 4464326
Accept-Ranges: bytes
Date: Wed, 04 May 2016 13:02:20 GMT
Via: 1.1 varnish
Age: 153069
Connection: keep-alive
Cache-Control: no-cache, no-store, private
X-Served-By: cache-fra1226-FRA
X-Cache: HIT
X-Cache-Hits: 2
X-Timer: S1462366940.863431,VS0,VE0
Plus, in the timeline, I see a download time of 4.61s so I guess to response was not actually empty.
I also tried with Fiddler but responser is still unavailable. Does someone has an explanation, or even better, knows how I can try to read the response ?
As you can see,
Content-Type: audio/mpeg
Can the chrome dev tools read this type of content?
When you are streaming a video, the Response panel shows as empty because the request hasn't completed yet. Once completed, it displays "Failed to load response data", since the data is likely to be too large to display as text in the panel.
You could try Wireshark to capture the HTTP response data.
I am playing around with HTML 5 cache manifests, and I am seeing a very strange issue in Chrome. Here's the page's header:
<html id="html" xmlns="http://www.w3.org/1999/xhtml" manifest="Portal/CacheManifestHandler.ashx">
Here are the manifest contents captured from fiddler:
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: text/cache-manifest; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 20 Apr 2012 15:56:20 GMT
Content-Length: 56
CACHE MANIFEST
NETWORK:
*
#Timestamp: 634705337615835020
I have one particular script on the page's header inside tag that is generated dynamically on server. Here are the contents returned for that script tag the first time user accesses the page:
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: text/javascript; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 20 Apr 2012 15:36:33 GMT
Content-Length: 74
document.location='/Portal/Login.aspx?ReturnUrl=%2fPortal%2fDefault.aspx';
You can see neither the script is in Cache-manifest, nor its headers allow browser (Chrome) to cache it.
Still when I subsequently open the same page in browser, Chrome loads the page from cache-manifest, which is okay.
However surprisingly it loads the <script> also from cache. I can verify it as my server breakpoints are not hit, nor does Fiddler show a request for this <script>. The network is not down and the server is accessible (this should not have made a difference because Chrome was asked to not cache this <script> anyways).
Is this the expected behavior? Shouldn't Chrome have requested the <script> again from server even when its containing page was loaded from manifest cache.
Chrome's chrome://appcache-internals also shows only 2 urls in the cache which again is fine, why then it loads the <script> from cache and not the server
We had the same issue, our resolution was to stick a * in the network section of our app.manifest so our Network section looked like
NETWORK:
*
I'm now digging to see if that's really "by design" for Google or just plain wrong.
I'm seeing the below response from some calls to a webserver:
Initial call:
HTTP/1.1 200 OK
Date: Mon, 16 Jan 2012 05:46:49 GMT
X-Powered-By: Servlet/2.5 JSP/2.1
Content-Type: text/plain
Content-Length: 78
Content-Encoding: gzip
Etag: "pv2052dae8634d971149a927231e3ceddf"
Cache-Control: no-cache
X-PvInfo: [S10202.C6191.A6057.RA6008.G182D.U3FAE8760].[OT/plaintext.OG/documents]
Vary: Accept-Encoding
Set-Cookie: JSESSIONID=l9pLPT5J1tpgK19Fq2qlT0F15ryByWDLgVLz16ffWPm4qQp6nzzx!-518520380; path=/; HttpOnly
DST=rd319o00000000000000000000ffffac16018bo8200; path=/
Connection: close
Subsequent calls:
HTTP/1.1 304 Not Modified
Date: Mon, 16 Jan 2012 05:48:43 GMT
Connection: close
Etag: "pv2052dae8634d971149a927231e3ceddf"
Cache-Control: no-cache
Vary: Accept-Encoding
What I'm unclear about is that both calls return a Cache-Control: no-cache directive to the browser.
However, the second call also returns a 304 Not Modified.
Where does the server expect the page to serve the data from, given that it's been instructed not to cache the earlier response?
Interestingly, I do see the response served in the browser, so the browser appears to have cached the response, despite the no-cache directive. Why?
A response with Cache-Control: no-cache does not mean that the response must not be stored at the client at all, instead it means:
If the no-cache directive does not specify a field-name, then a
cache MUST NOT use the response to satisfy a subsequent request
without successful revalidation with the origin server. This
allows an origin server to prevent caching even by caches that
have been configured to return stale responses to client requests.
So the client is allowed to store the response in the local cache but it needs to revalidate the response by the origin server. If the server says that the response stored in the client’s cache is still valid (i. e. 304 response), the client is allowed to use the stored response to satisfy the request.