Problem:
Unable to apply caching headers to re-written routes (i.e. /bla -> /index.html).
Firebase documentation clearly states that the headers are applied when the 'source' glob pattern matches the original request.
Can anyone help with a workaround / solution to this?
Code:
Note: The headers directive for the 'index.html' source does not work unless the user directly hits /index.html, but is kept in the code to better articulate the issue.
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "build",
"rewrites": [
{
"source" : "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "index.html",
"headers": [
{
"key" : "Cache-Control",
"value" : "max-age=0"
}
]
},
{
"source": "**/*.#(js|css)",
"headers": [
{
"key" : "Cache-Control",
"value" : "max-age=31536000"
}
]
}
]
}
}
Related
I am trying to redirect people that call mywebsite.com/poly/1 to a corresponding .png image but it is not working.
I have tried using Glob:
"rewrites": [
{
"source": "/poly/:tokenId",
"destination": "/images/:tokenId/img.png",
"type": 301,
"headers": [ {
"key": "Access-Control-Allow-Origin",
"value": "*"
}]
}
]
Regex:
"rewrites": [
{
"regex": "/poly/(\\d+)",
"destination": "/images/:1/img.png",
"type": 301,
"headers": [ {
"key": "Access-Control-Allow-Origin",
"value": "*"
}]
}
]
I always get a 404, but it works if the destination is static like:
"destination": "/images/1/img.png",
I have tested this using firebase serve.
Any ideas?
You are mixing the syntax of rewrites and redirects.
// rewrites
"hosting": {
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
}
// redirects
"hosting": {
"redirects": [ {
"source": "/foo",
"destination": "/bar",
"type": 301
} ]
}
Rewrites match a source and serve destination files. They don't support URL segments.
Redirects match a source and tell the browser to use the destination path instead. They do support URL segments.
You could use a rewrite if you don't mind the destination paths being available. You could upload the files to Firebase Storage and proxy the files through a Function but that would not be ideal.
We are trying to set Cache-control in order to avoid aggressive caching by browsers. Unfortunately, we can't seem to get firebase to actually set this header. Here is our
firebase.json
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "**/*.#(jpg|jpeg|gif|png|svg|webp|eot|otf|ttf|ttc|woff|woff2)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=604800"
}
]
}
]
}
}
We thought maybe our blob pattern matching was off so we have tried every combination you can imagine. **/*, **/, /**, etc. We can't figure out why these headers are not being applied. Any help would be very appreciated.
Turns out the above actually works. It's just that chrome was caching the responses (the very thing we were trying to fix). When testing this make sure to use incognito mode.
This may be an oversight but I'm using firebase and set up the firebase.json file which is a mixture of auto-generation and copying the headers block from Firebase's documentation. The issue is, my fonts refuse to allow me access even though my file looks like this:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source" : "**/*.#(eot|otf|ttf|ttc|woff)",
"headers" : [{
"key" : "Access-Control-Allow-Origin",
"value" : "*"
}]
}, {
"source" : "**/*.#(jpg|jpeg|gif|png|svg)",
"headers" : [{
"key" : "Cache-Control",
"value" : "max-age=7200"
}]
}]
},
"storage": {
"rules": "storage.rules"
}
}
This is the CORS error I'm getting:
Access to Font {Firebase font url}. {Firebase font url} from origin {Firebase project url} has been blocked by CORS policy. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin {Firebase project url} is therefore not allowed access.
Side note: I have an images folder in which I am able to load those just fine. Is there something about fonts that require more attention?
Firebase rolled out a new feature/tool that forces users to update the CORS settings for Google Storage. I found the answer on this StackOverflow question.
Firebase Storage and Access-Control-Allow-Origin
I receive error
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://MY-Firebase-APP.Firebaseapp.com' is therefore not allowed access.
when accessing a json file from my Firebase storage. Here is the rules for the storage-
service firebase.storage {
service firebase.storage {
match /b/paystumped.appspot.com/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
The app is hosted by Firebase as well. Here is the firebase.json I am using when I run 'firebase deploy'
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [
{
"source": "**/*",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
},
{
"source": "**/*.#(jpg|jpeg|gif|png)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=7200"
}
]
},
{
"source": "404.html",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=300"
}
]
}
],
"cleanUrls": true,
"trailingSlash": false
}
}
I am sure there is some trivial CORS setup to do to make this work.
After reading up on CORS and understanding how this should work I found the desired answer here.
https://stackoverflow.com/a/37765371/4360863
The firebase storage policy is configured by a utility provided by google.
I am trying to set Access-Control-Allow-Origin to * on a certain file.
This is my firebase.json file:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"headers": [ {
"source" : "bundle.js",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
}]
}
However it never gets set: https://curious-athlete-131013.firebaseapp.com/bundle.js
Try nesting the headers underneath hosting rather than as it's own top level node:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"rewrites": [{
"source": "**",
"destination": "/index.html"
}],
"headers": [{
"source" : "bundle.js",
"headers" : [{
"key" : "Access-Control-Allow-Origin",
"value" : "*"
}]
}]
}
}
"Custom, file specific, headers can be specified by defining a headers section within hosting in the firebase.json file:" - Firebase Docs