首页 > 解决方案 > 函数被调用,但没有按预期工作。原因在哪里?

问题描述

继续上一个问题

我已经在 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.

这是原因吗?我认为这是另一个问题。

标签: javascriptfirebaseexpressgoogle-cloud-functions

解决方案


这篇文章中也讨论了这个问题,并且可能有很多原因导致这种情况发生。

可能值得更改 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' ....... >

这很可能是浏览器问题。您可能应该尊重一些精确的格式。请检查我在答案开头附加的帖子,并尝试那里建议的所有解决方案。希望对你有帮助 !


推荐阅读