I have a SPA with the following setup:
Frontend: React deployed using Firebase Hosting
Backend: GraphQL API written in Django deployed on Cloud Run
Everything works locally but when I deploy the app and try to make requests, I get a CORS error due to preflight missing allow origin header:
Access to fetch at 'https://cloud-run-api-hash.a.run.app/graphql/' from origin 'https://project-id.web.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
Using django-cors-headers, I have already added the Firebase domain to the CORS_ORIGIN_WHITELIST in my Django settings.
My firebase.json looks like this:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/authenticated/**",
"run": {
"serviceId": "cloud-run-serviceID",
"region": "us-central1"
}
},
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [ {
"source": "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers": [ {
"key": "Access-Control-Allow-Origin",
"value": "*"
} ]
} ]
}
}
My intention is to trigger the cloud run container after the user is authenticated and is routed to https://project-id.web.app/authenticated, but I'm not seeing any Cloud Run logs after I login to the app. Furthermore, when I try to send any HTTP requests I get the CORS error shown above. Not sure where went wrong here because I strictly followed the Cloud Run/Firebase Hosting documentation. Any advice is greatly appreciated.
It turns out that the problem was with django-cors-headers. I put the allowed domains in CORS_ALLOWED_ORIGINS instead of CORS_ORIGIN_WHITELIST and it worked. According to the documentation, this setting was renamed. I still unsure why CORS_ORIGIN_WHITELIST doesn't work on Cloud Run though... it should work as an alias.
Related
I have a proyect in firebase, with two custom domains, as show de image firebase console.
With the fist one, colademonofrozen.cl/ I get index.html file OK, but with the second, www.colademonofrozen.cl/ I get 404 not found.
Some strange thing about this case is that www.colademonofrozen.cl/anything display index.html file OK.
This is the hosting configuration:
`
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/api/**",
"function": "app",
"region": "us-central1"
},
{
"source": "/admin",
"destination": "/admin.html"
},
{
"source": "**",
"destination": "/index.html"
}
]
},
`
I worked a lot for this project, I really appreciate any ideas.
I also appreciate anyone confirming that the domain shows an error page, so the problem cannot be ignored if it starts working.
I confirmed that it is not a cache problem.
The subdomain is configured more than two weeks ago, is not time propagation problem.
I requested a redirect at my dns provider, from the subdomain www.colademonofrozen.cl/ to colademonofrozen.cl/, but is not posible if the domain points to Firebase.
To my bad luck, the back label of the product for which I created the project are already printed.
see back label!
I change following DNS record:
name
type
value
www.colademonofrozen.cl.
CNAME
colademonofrozen.cl
for:
name
type
value
www.colademonofrozen.cl.
A
199.36.158.100
Now works OK.
I'm trying to trigger the following function "dynamicMetaTagsUpdate" I have my Firebase rewrite setup like so
"rewrites": [
{
"source": "chart/**",
"function": "dynamicMetaTagsUpdate"
},
{
"source": "**",
"destination": "/index.html"
}
]
My apps URL are, the first view https://viz.wiijii.co/#/create-chart
and where I want the function to run https://viz.wiijii.co/#/chart/?id=-MfJuHEtO2EQ3mpo682O
This is the generated chart but it's not working am I missing something
This is because you are using URL fragments in the URL (#). Everything after the # in the URL is never sent to the server and cannot be used as the basis of Firebase Hosting rewrites. Instead, the URL should be e.g. https://viz.wiijii.co/chart/?id=-MfJuHEtO2EQ3mpo682O
From Firebase docs, we get that it's supposed to set Cache-Control: private as default.
Firebase Hosting- Manage cache behavior
I generate my robots.txt on the fly, hence it might change from one request to the next. Because of that, I don't want it cached by the CDN. But to my surprise, I'm getting CDN hits for robots.txt.
See:
I do the same with ads.txt and sitemap.xml. The same is happening with ads.txt, but not with sitemap.xml.
Maybe it's something related to .txt files. Could this be a bug?
Do I have to explicitly set the Cache-Control: private?
You can configure that specific file's cache-control header through the firebase.json file like this:
{
"hosting": [
{
...,
"headers": [
{
"source": "robots.txt",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
]
}
]
}
More info in the docs here.
Setting up a firebase hosting project, I'd like to redirect all requests except for one to another domain and retain the url segment in the redirect. For example example.com/page should redirect to www.example.com/page, while anything starting with example.com/ignore should not redirect.
In firebase.json, I wrote this rule to redirect any request not in the ignore path:
"redirects": [
{
"source": "/!(ignore)",
"destination": "https://www.example.com/",
"type": 302
}
]
This redirect works, however I want to capture any url segments in the redirect. I'm trying to followed the example from their docs where :post* is the url segment I want to retain, but I do not know how to write it in the redirect rules.
"hosting": {
// ...
"redirects": [ {
"source": "/blog/:post*", // captures the entire URL segment beginning at "post"
"destination": "https://blog.myapp.com/:post", // includes the entire URL segment identified and captured by the "source" value
"type": 301
}
I have also tried the following which works to capture the url segment in redirect, but also redirects my ignored path as well.
"redirects": [
{
"source": "/:path*",
"destination": "https://www.example.com/:path",
"type": 302
}
]
I've also tried the above snippet with the ignore folder added to the ignore rules and this did not work either.
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**",
"**/ignore/**"
],
...
}
I'd like to be able write a glob pattern to capture any path that doesn't match the ignore path and use that in the redirect, something like:
"source": "/!(ignore)**path**,
"destination: "https://www.example.com/**path**",
"type": 302
I have set up a firebase hosting project with three pages and my custom domain setup . These pages get hit based on different paths in the url. The firebase.json file is as follows
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [ {
"source": "/main",
"destination": "/index.html"
},{
"source": "/waitlistview/**",
"destination": "/waitlistview.html"
},{
"source": "/mwaitlistview/**",
"destination": "/waitlistview-minimal.html"
}
],
"cleanUrls": true
}
}
Now when i try a url :
foodini.co.in/waitlistview
Instead of getting an error with 404 page, i still hit my page
Whereas if i hit the url:
foodini.co.in/mwaitlistview
I get the 404 page as i expect.
How to i make the first url to also go to 404 page
According to firebase hosting docs, Hosting first tries to map a file inside the public directory to the path in the url. Only if there is no such file will a rewrite take effect.
In my case, I had a file /waitlistview.html directly inside the public folder. Thus firebase hosting just mapped the url to that file even without a trailing slash. The rewrite never occurred and thus there was no 404 page
Also for anyone interested:
your default domain name directly maps to index.html without the need for any specific path
Also /waitlistview** does not match /waitlistview/Ahmedabad/xyz path via GLOB matching so please have a slash before **
add
"trailingSlash": false,
before the line
"cleanUrls": true
Reason is that "foodini.co.in/waitlistview" does not match "/waitlistview/", it would match "/waitlistview".