javascript - 函数被调用,但没有按预期工作。原因在哪里?
问题描述
继续上一个问题。
我已经在 firebase 控制台中确认调用了函数。但是,浏览器中不会出现任何结果。我想重写元标记并更改地址。
我的代码有问题吗?
浏览器不会返回错误。
使用 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);
我重复验证。在确认本教程有效后,我也尝试了我的功能。
然后,浏览器将显示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.
这是原因吗?我认为这是另一个问题。
解决方案
这篇文章中也讨论了这个问题,并且可能有很多原因导致这种情况发生。
可能值得更改 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' ....... >
这很可能是浏览器问题。您可能应该尊重一些精确的格式。请检查我在答案开头附加的帖子,并尝试那里建议的所有解决方案。希望对你有帮助 !
推荐阅读
- android - GeoLocation 为 Android 11 和 Ionic 6 返回“位置不可用”
- javascript - Javascript loop through DOM
- swiftui - 使用 swiftUI 向子视图 (WKWebView) 发送更新?
- python - 带有 KWARGS 的 Python Pickle 自定义类会导致类型错误。我如何处理 kwargs?
- reactjs - 如何在 ReactJs 中仅在 Home 组件上呈现特定组件?
- react-native - 反应原生重新选择错误选择器创建者,除了所有输入
- haskell - Haskell - 将联合列表转换为列表元组
- spring-security - 连接被拒绝 - 无法获取用户详细信息 - 尝试访问身份验证服务器时
- python - Python 资源模块不支持“管道大小”和“虚拟内存”资源限制
- reactjs - 如何在 Next js 中集成 React Odometerjs