I'm making a website based on my API is implemented on the server. API supports ETag, If-Modified-Since. The website is written using BackBone.js. When I use the methods of collection (fetch) to retrieve data from the server, backbone operates without cache-control. How can I set the appropriate headers (etag, etc.) in the query data?
It really depends on your server as that's where the cache headers are set and the browser just obeys them. Most people use Apache or Nginx. For Nginx I like to cache static media for example:
location ~* ^.+\.(jpg|jpeg|gif|png|ico|eot|ttf|woff) {
root /var/www/html/mysite.com;
expires 90d;
}
Note that for any webserver you can get granular with your caching from the path down to the file extension of the request. Google and you will find how to set it for apache.
Related
I'm writing a web media viewer for images/videos and I need to cache that media for offline use.
I have a manifest and service worker so it can be installed as a PWA, and I'm trying to cache media from a list of URLs with esentially:
let cache = await window.caches.open('pwa-assets');
for(let url of allAssetURLs) {
await cache.add(url);
}
This seems to work fine for local assets, but if those URLs are on a different domain (from a CMS/CDN) I get this CORS error.
Access to fetch at 'https://storage.googleapis.com/....appspot.com/...example.mp4' from origin 'https://127.0.0.1:4173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Web.dev has a note that cross-domain caching is possible here, but doesn't say much about it.
The URLs I'm trying to cache are for files store in google cloud storage, for example:
https://storage.googleapis.com/....appspot.com/...example.mp4
These do work if used in <img/> or <video/> tags, so I don't think it's a CORS header issue on the CDN.
You write:
These do work if used in <img/> or <video/> tags, so I don't think it's a CORS header issue on the CDN.
Loading such subresources across origins is by default compatible with the Same-Origin Policy (SOP) and doesn't trigger CORS errors. See the relevant section of the MDN Web Docs about the SOP:
Here are some examples of resources which may be embedded cross-origin: [...]
Images displayed by <img>.
Media played by <video> and <audio>.
You write:
This seems to work fine for local assets, but if those URLs are on a different domain (from a CMS/CDN) I get this CORS error.
Invoking the add method on a Cache results in a GET request. If its argument is on a different origin, the resource in question needs to be configured for CORS or you'll get a CORS error, as you've experienced. See the note in the relevant MDN Web Docs:
Note that for opaque filtered responses [...]
we can't access to [sic] the response headers, so this check
will always fail and the font won't be cached. [...]
It is something to keep in mind if you're attempting to
cache other resources from a cross-origin domain that
doesn't support CORS, though!
You write:
The URLs I'm trying to cache are for files store in google cloud storage, for example https://storage.googleapis.com/....appspot.com/...example.mp4.
This page of the Google Storage documentation explains how to configure CORS for your bucket(s), assuming those buckets are indeed yours. Otherwise, you're out of luck and won't be able to cache those resources on the client side.
This is about the cache strategy for serving multiple languages on the same URL, while using Cloudflare (not enterprise).
(Obviously that's not a problem when navigating with JavaScript with Ajax requests or when using an "hreflang" link)
Our server handles it correctly, the nginx cache is able to store the different caches per language and serve them by a cookie or accept-language value. Also the client browser will be able to differentiate caches by language using “Etags” header.
But Cloudflare (not Enterprise), only holds one cache per URL, and cannot serve a cache depending on a cookie value.
My fix for this, is using Cache-Control=“no-cache”, so Cloudflare will always validate if the cache is still valid, if the requested language is the same as the Cloudflare cache, that will be true, if not, Cloudflare will receive a new cache.
I guess you can see the problem, if a page is constantly requested in different languages, Cloudflare will be changing the cache all the time, on top of always be validating to my server.
Do you see any better strategy with the same setup? (Not including: using Cloudflare Enterprise, using my own mini-CDN network of proxy servers, or separating the URLs completely by language.)
I'm developing a site that's virtually entirely static. I use a generator to create all the HTML.
However, my site is a front-end to a store embedded in its pages. I have a little node.js server proxying requests on behalf of the browser to the back-end store. All it does is provide the number of items in the shopping cart so I can keep the number updated on all pages of my site. That's because the browser doesn't allow cross-domain scripting. My server has to act as a proxy between the client and the store.
(The embedded store is loaded from the store's web site and so itself does not require proxying.)
I was hoping to eventually deploy to Netlify or some similar JAMstack provider. But I don't see how I'd proxy on Netlify.
What is the standard solution to this problem? Or is proxying unavailable to JAMstack solutions? Are there JAMstack providers that solve this problem?
Netlify does allow for proxy rewrites using redirect paths with status code 200.
You can store your proxy redirects in _redirects at the root of your deployed site. In other words the file needs to exist at the root of the site directory to be deployed after a build.
_redirects
/api/* https://api.example.com/:splat 200
So a call to:
/api/v1/gifs/random?tag=cat&api_key=your_api_key
will be proxied to:
https://api.example.com/v1/gifs/random?tag=cat&api_key=your_api_key
If the API supports standard HTTP caching mechanisms like Etags or Last-Modified headers, the responses will even get cached by CDN nodes.
NOTE: you can also setup your redirects in your netlify.toml
I have a Single Page Application, and would like to cache some of the public REST API calls. Is it possible to use CloudFront to cache the JSON result of those API calls?
You can point api.yourdomain.com to cloudfront domain. Cloudfront will cache the json response based on your cache control headers.
However, you'll likely have to deal with cross domain issue if your single page app is not served from api.yourdomain.com. Cloudfront supports OPTIONS request which means it should be able to support CORS. You can also enable caching of OPTIONS requests.
http://aws.amazon.com/cloudfront/faqs/#Does_Amazon_CloudFront_cache_POST_responses
I am working with cookies in my .net application. Is there anyway in the setting of the cookie to the users web browser it wont be sent in the http request for static resources such as css, javascript or images. Or is the only way around not sending cookies in such requests, setting up cookieless domains for such resources.
Let me start by saying this: Unless you're getting thousands of requests per second, the total effect on bandwidth and server load will be minimal. So unless you're working with a really high traffic site, I wouldn't bother.
With that said, Path is not really a good option. That's because most paths are underneath a website's valid path (usually / is a valid dynamic url, but statics are served from under /)...
Instead, I would serve static content from a different domain (it could be served by the same server, or a CDN which is preferred). So create a subdomain like static.domain.com, and reference all of your static content from there. It doesn't matter where on the server it's mapped to, just that it's referred by the HTML from the other domain. Cookies won't be transmitted since the domain part won't be the same (as long as you don't use wildcard domain identifiers in the cookie declaration)...