Jsdelivr: Cache not working: Add 'expires', 'last-modified' Headers and 304 response (Joined files)

Created on 7 Jun 2019  路  7Comments  路  Source: jsdelivr/jsdelivr

The browsers are preventing the cache of my assets files, but can cache Cloudflare assets.

I only find this differences in the Cloudflare response:

  • HTTP/2.0 304 Not Modified (instead of HTTP/2.0 200 OK)
  • expires: Wed, 27 May 2020 13:58:38 GMT (only in Cloudflare)
  • last-modified: Mon, 25 Mar 2019 19:00:55 GMT (only in Cloudflare)

jsDelivr, browser can't cache:
https://cdn.jsdelivr.net/combine/npm/short-and-sweet@latest/dist/short-and-sweet.min.js,npm/popper.js@latest/dist/umd/popper.min.js,npm/jquery-vjs-rails@latest/src/rails.min.js,npm/bootstrap@latest/dist/js/bootstrap.bundle.min.js,npm/plyr@latest/dist/plyr.min.js

HTTP/2.0 200 OK
access-control-allow-origin: *
access-control-expose-headers: *
timing-allow-origin: *
cache-control: public, max-age=604800, s-maxage=43200
x-content-type-options: nosniff
strict-transport-security: max-age=31536000; includeSubDomains; preload
content-type: application/javascript; charset=utf-8
etag: W/"376e1-lMU9JDqadUOS2SxkCDLVN+IefOg"
content-encoding: gzip
accept-ranges: bytes
date: Fri, 07 Jun 2019 13:58:38 GMT
x-served-by: cache-ams21023-AMS, cache-gru17122-GRU
x-cache: MISS, HIT
vary: Accept-Encoding
content-length: 64038
X-Firefox-Spdy: h2

Cloudflare CDN, browser can cache:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css

HTTP/2.0 304 Not Modified
date: Fri, 07 Jun 2019 13:58:38 GMT
last-modified: Mon, 25 Mar 2019 19:00:55 GMT
etag: W/"5c992567-d747"
expires: Wed, 27 May 2020 13:58:38 GMT
cache-control: public, max-age=30672000
vary: Accept-Encoding
timing-allow-origin: *
access-control-allow-origin: *
served-in-seconds: 0.021
cf-cache-status: HIT
strict-transport-security: max-age=15780000; includeSubDomains
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
cf-ray: 4e3324585963d03c-GRU
X-Firefox-Spdy: h2

I know individual files are better for cache but the joined solved many performance problem in my projects.
If possible, I want to use the joined file with cache headers.

One of my browsers: https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly

Thanks!

question

Most helpful comment

We use etags instead of last-modified so the request should include something like if-none-match: W/"376e1-lMU9JDqadUOS2SxkCDLVN+IefOg"

If it isn't there it's most likely an issue with your browser configuration or an addon.

All 7 comments

Our responses are cached just like those from cdnjs. You'll get a 304 on subsequent requests.

assets-can-cache

@MartinKolarik Thanks, but the browser are caching Cloudflare and not caching jsDelivr.

Maybe the problem is in the headers?
Maybe it's a browser problem?

Thanks!

It could be something with your browser. The response headers above are OK and I checked in both Firefox and Chrome and it's cached:

image

What are the request headers for one of the jsDelivr requests which is supposed to return 304?

@MartinKolarik Thanks.

The browser send that headers to the jsDelivr server(And cannot cache):

Host: cdn.jsdelivr.net
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
Accept: */*
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: https://bac.hotsoft.com.br/laboratorios
DNT: 1
Connection: keep-alive
X-Forwarded-For: 213.100.111.70
Cache-Control: max-age=0
TE: Trailers

or

curl 'https://cdn.jsdelivr.net/combine/npm/short-and-sweet@latest/dist/short-and-sweet.min.js,npm/popper.js@latest/dist/umd/popper.min.js,npm/jquery-vjs-rails@latest/src/rails.min.js,npm/bootstrap@latest/dist/js/bootstrap.bundle.min.js,npm/plyr@latest/dist/plyr.min.js' -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36' -H 'Accept: */*' -H 'Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3' --compressed -H 'Referer: https://bac.hotsoft.com.br/laboratorios' -H 'DNT: 1' -H 'Connection: keep-alive' -H 'X-Forwarded-For: 213.100.111.70' -H 'Cache-Control: max-age=0' -H 'TE: Trailers'

I don't know why the browser is sending cache control header with zero max age:
-H 'Cache-Control: max-age=0'
But the header doesn't make difference in my tests.


And this are the headers sent by browser to Cloudflare CDN (Cache working well):

Host: cdnjs.cloudflare.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
Accept: text/css,*/*;q=0.1
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: https://bac.hotsoft.com.br/laboratorios
Origin: https://bac.hotsoft.com.br
DNT: 1
Connection: keep-alive
X-Forwarded-For: 213.100.111.70
If-Modified-Since: Mon, 25 Mar 2019 19:00:55 GMT
Cache-Control: max-age=0
TE: Trailers

or

curl 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css' -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36' -H 'Accept: text/css,*/*;q=0.1' -H 'Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3' --compressed -H 'Referer: https://bac.hotsoft.com.br/laboratorios' -H 'Origin: https://bac.hotsoft.com.br' -H 'DNT: 1' -H 'Connection: keep-alive' -H 'X-Forwarded-For: 213.100.111.70' -H 'If-Modified-Since: Mon, 25 Mar 2019 19:00:55 GMT' -H 'Cache-Control: max-age=0' -H 'TE: Trailers'

The biggest difference is that If-Modified-Since header:
If-Modified-Since: Mon, 25 Mar 2019 19:00:55 GMT

Without the If-Modified-Since header the browser don't cache Cloudflare request.
But I'm still not getting cached response when I use the same header in the jsDelivr request.

And I really don't know why the browser send different requests.
The browser: https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly

In the Cloudflare the "If-Modified-Since" header do the job and receive 304 not modified response.
But the jsDelivr doesn't send 304 response with "If-Modified-Since" header.

Thanks!

We use etags instead of last-modified so the request should include something like if-none-match: W/"376e1-lMU9JDqadUOS2SxkCDLVN+IefOg"

If it isn't there it's most likely an issue with your browser configuration or an addon.

@MartinKolarik Thanks.

@MartinKolarik I found problems with that extension and the cache:
https://addons.mozilla.org/pt-BR/firefox/addon/chameleon-ext/

Cache working well after add-on disable.
Thanks again.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

limonte picture limonte  路  5Comments

LinuxSuRen picture LinuxSuRen  路  9Comments

miyurusankalpa picture miyurusankalpa  路  7Comments

SukkaW picture SukkaW  路  9Comments

jhildenbiddle picture jhildenbiddle  路  6Comments