Cannot load material design css from CDN using Firebase Hosting - google-chrome

Question

I am getting the following error:
XMLHttpRequest cannot load
https://code.getmdl.io/1.3.0/material.indigo-pink.min.css. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://nhalistonfirebase.firebaseapp.com' is
therefore not allowed access.
Here's my firebase.json file:
{
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
// Add the "headers" section within "hosting".
"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"
}
]
}
]
}
}
How should this be corrected?

Answer 1

code.getmdl.io doesn’t send the Access-Control-Allow-Origin response header that’s necessary to make browsers allow your frontend JavaScript code to access the response.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details.
The firebase.json file shown in the question is for the https://nhalistonfirebase.firebaseapp.com site I guess? If so, it doesn’t matter what CORS config you do there—what instead matters is what CORS config is set on the site your code is sending the request to.
And the code.getmdl.io site apparently has no CORS config to allow cross-origin requests.
But you can get around this by using a CORS proxy. You can instead use this request URL:
https://cors-anywhere.herokuapp.com/https://code.getmdl.io/1.3.0/material.indigo-pink.min.css
That sends the request through https://cors-anywhere.herokuapp.com, which forwards the request to https://code.getmdl.io/1.3.0/material.indigo-pink.min.css and then receives the response. The https://cors-anywhere.herokuapp.com backend adds the Access-Control-Allow-Origin header to the response and passes that back to your requesting frontend code.
The browser will then allow your frontend code to access the response, because that response with the Access-Control-Allow-Origin response header is what the browser sees.
You can also easily set up your own CORS proxy using https://github.com/Rob--W/cors-anywhere/