上一个question的继续。
我已经在Firebase控制台中确认调用了函数。但是，没有结果显示在浏览器中。我想重写meta标记并更改地址。我的代码有问题吗？浏览器不会返回错误。
使用VueCLI和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}` });
}
}
↑此过程有效。
#router.js
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/share/:id",
name: "Result",
component: Result
},
我最终希望将用户转换为“ / 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);
我反复验证。确认this tutorial有效后，我还尝试了我的功能。然后，浏览器将显示Cannot GET /s/16dc8b71。访问的URL是<domain>/s/<id>。此外，控制台还会显示以下错误。
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.
这是原因吗？我认为这是另一个问题。
this post中也讨论了这个问题，并且可能有很多原因。
可能值得更改app.get中的路径。尝试更改为Phil的不同变体，也请在评论中告诉您。
然后，当您重写元数据时，尝试在内容中包括font-src 'self' data:;。像这样：meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; default-src 'self' ....... >
这很可能是浏览器问题。您可能应该尊重某些精确度格式。请检查我在答案开头的帖子，并尝试那里建议的所有解决方案。希望这对您有帮助！