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
Related
Firebase json configuration
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"
}],
"headers": [
{
"source": "/images/*.#(jpg|jpeg|gif|png)",
"headers": [{
"key": "Cache-Control",
"value": "max-age=3600000"
}]
},
{
"source": "https://cdn.ampproject.org/v0.js",
"headers": [{
"key": "Cache-Control",
"value": "max-age=3000000"
}]
}
]
}
}
I tried to use the cdn link straight from source but it did not work. Does anyone know how I can do the https://cdn.ampproject.org/v0.js
IMAGE of Optimization for pagespeed insights i am trying to do
What you're trying to do I'm 99.9% certain can't be done. AMP controls that file, therefore you can not set custom cache headers on it. Best to just ignore that issue in the Page Speed Insights test (all other page speed metric sites will hit on it to).
AMP requires the JS files to be served from their CDN so you can't pull it down to your server either to gain control of the cache headers.
Problem:
Unable to handle Firebase Storage urls in Angular6 service worker (presumably due to CORS).
firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [ {
"source" : "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"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"
} ]
} ]
}
}
ngsw-conf.json
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/apple-touch-icon-precomposed.png",
"/apple-touch-icon.png",
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
],
"urls": [
"https://fonts.googleapis.com/**",
"https://firebasestorage.googleapis.com/**"
]
}
}],
"dataGroups": [{
"name": "api-performance",
"urls": [
"/some_route"
],
"cacheConfig": {
"strategy": "performance",
"maxSize": 100,
"maxAge": "3d"
}
}
]
}
All files were uploaded to the Firebase Storage with following metadata:
{
cacheControl: 'public,max-age=36000',
contentType: 'image/jpeg'
}
When I load the app in Chrome or Opera, the app renders OK but I get error message 'Failed to load some_firebase_storage_download_link : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin my_app_domain is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.' and when I reload the app, no Firebase Storage resources are loaded.
When I load the app in Safari or Edge the app does not render at all and I get multiple console errors 'Failed to load resource'.
The app is being rendered and cached in Firefox without any issue.
When I omit the Firebase Storage and use only resources in Firebase Hosting, then the app is cached errorless in all browsers.
I have searched for setting the request's mode to 'no-cors', but failed to reach any resolution regarding my issue.
UPDATE
This might be caused by interference of NGSW and Firebase Firestore persistence handler (ie.: firebase.firestore().enablePersistence(); ). I am not sure how exactly Firebase Firestore persistence works, but when I initialise the app without Firestore persistence, then I am able to cache dynamic links from Firebase Storage. That is no use to me as I need both db and storage available at the same time.
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"
}
]
}
]
}
}
I have a page named story.html and a story node in Firebase realtime database with a key of 12ab34cd
How do I properly set the hosting rules to not direct the URL "website.com/story/12ab34cd" to a 404 page?
I already did the ff to my firebase.json file
{
"public": "retroscope-root",
"database": {
"rules": "database.rules.json"
},
"rewrites": [
{
"source": "story/*",
"destination": "/story.html"
}
],
"trailingSlash": false,
"cleanUrls": true
}
I still get redirected to a 404 page with the key present
Below is my simple firebase.json. If I read the docs right it should tag all files with 'Access-Control-Allow-Origin'. Unfortunately none of the files are being tagged resulting in the error:
Imported resource from origin 'https://gaspush.firebaseapp.com' has
been blocked from loading by Cross-Origin Resource Sharing policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Could someone take a look and let me know how to properly allow all files to all endpoints?
{
"firebase": "gaspush",
"headers": [ {
"source" : “**”,
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
} ],
"public": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
This is maybe no longer relevant to the original question, but I ran into a similar issue with the new version of Firebase. I had accidentally placed "headers" section outside of the "hosting" key.
The below snippet worked for me.
"hosting": {
"public": ".",
"headers": [ {
"source" : "**",
"headers" : [{
"key" : "Access-Control-Allow-Origin",
"value" : "*"
}]
}]
}