函数被调用，但没有按预期工作。原因在哪里？答案

【问题标题】：functions are called but do not work as expected. Where is the cause?函数被调用，但没有按预期工作。原因在哪里？
【发布时间】：2020-02-10 17:10:16
【问题描述】：

延续之前的question。

我已在 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);

我重复验证。在确认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 quick tutorial吗？看起来您的路线不正确（除非您确实希望 URL 为 /s/s/:id）。我会改用app.get('/:id', ...
@Phil 使代码具体化。我希望函数在访问<domain> / s / <id> 并通过id 进行搜索时工作。我把它改成app.get (" /: id ",并执行了，结果没有改变。
这不是您的问题代码中的内容。你还有/s/:id。此外，您没有将 id 参数传递给 genHtml()
@Phil 当然，无法将数据传递给getHtml ()。更改为genHtml (data.imageurl, uid)。你还需要什么？我还是不明白。
你仍然在你的路由中有/s/:id。我真的认为你想要 /:id 而不是

标签： javascript firebase express google-cloud-functions

【解决方案1】：

this post 也讨论了这个问题，发生这种情况的原因可能有很多。

可能值得更改 app.get 中的路径。尝试更改为 Phil 的不同变体，在 cmets 中也告诉过你。

然后，当您重写元数据时，请尝试在内容中包含以下内容：font-src 'self' data:;。像这样的东西：meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; default-src 'self' ....... >

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

【讨论】：