Following on from the previous query.
In Firebase console, it has been verified that functions are being executed. However, the browser does not display any results. I am looking to modify the meta tag and update the URL. Is there an issue with my code?
No errors are returned by the browser.
The development is carried out using VueCLI and Firebase.
#create.vue
export default {
components: {},
data() {
return {
//...
};
},
methods: {
async create() {
//After saving data in database, transition page.
this.$router.push({ path: `/s/${this.uuid}` });
}
}
↑This process works.
#router.js
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/share/:id",
name: "Result",
component: Result
},
Finally, I aim to transition the user to "/ share /: id".
#functions/firebase.json
{
"functions": {
"source": "functions"
},
"hosting": {
"public": "dist",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "/s/*",
"function": "s"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
}
#functions/index.js
const functions = require("firebase-functions");
const express = require("express");
const app = express();
const admin = require("firebase-admin");
admin.initializeApp(functions.config().firebase);
const db = admin.firestore();
const genHtml = (image_url, id) => `
<!DOCTYPE html>
<html>
<head>
//Meta tag to overwrite
</head>
<body>
<script>
location.href = '/share/${id}';
</script>
</body>
</html>
`;
app.get("s/:id", (req, res) => {
const uid = req.params.id;
db.collection("cards")
.doc(uid)
.get()
.then(result => {
if (!result.exists) {
res.status(404).send("404 Not Exist");
} else {
const data = result.data();
const html = genHtml(data.imageurl, uid);
res.set("cache-control", "public, max-age=600, s-maxage=600");
res.send(html);
}
});
});
exports.s = functions.https.onRequest(app);
I have conducted repeated verification.
Having confirmed that the mentioned tutorial works, I tested my functions as well.
However, when testing, the browser indicated Cannot GET /s/16dc8b71. The URL accessed was <domain>/s/<id>.
Moreover, an error was displayed in the console:
Refused to load the image '<domain>/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Could this be the root of the problem? I suspect another issue may be at play.