functions are called but do not work as expected. Where is the cause?

Question

Continuation of the previous question.

I have confirmed in the firebase console that functions are called. However, no results appear in the browser. I want to rewrite the meta tag and change the address.
Is there a problem with my code?
The browser does not return an error.

Development is done with 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
    },

I want to finally 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 repeated verification. After confirming that this tutorial works, I also tried my functions.
Then, the browser will display Cannot GET /s/16dc8b71. The accessed URL is <domain>/s/<id>.
In addition, the console displays the following error.

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.

Is this the cause? I think it is another problem.

Your route doesn't do anything so I'm not sure what you expect to happen. Have you had a look at [this quick tutorial](https://firebase.google.com/docs/functions/http-events#using_existing_express_apps)? Looks like your route is incorrect (unless you actually do want the URL to be `/s/s/:id`). I would use `app.get('/:id', ...` instead — Phil, Oct 14 '19 at 05:46
@Phil Made the code concrete.I want functions to work when ` / s / ` is accessed and do a search by `id`. I changed it to `app.get (" /: id ",` and executed it, but the result did not change. — kan, Oct 14 '19 at 06:43
That's not what's in your question code. You still have `/s/:id`. Also, you're not passing the `id` parameter to `genHtml()` — Phil, Oct 14 '19 at 08:27
@Phil Certainly, data could not be passed to `getHtml ()`. Change to `genHtml (data.imageurl, uid)`. What else do you need? I still don't understand. — kan, Oct 15 '19 at 02:32
You **still** have `/s/:id` in you route. I honestly think you want `/:id` instead — Phil, Oct 15 '19 at 03:37

score 0 · Answer 1 · answered Oct 16 '19 at 07:38

This issue was discussed in this post, also and there could be a lot of reasons for that to happen.

It may worth changing a bit the path in the app.get. Try to change to different variations as Phil, also told you in the comments.

Then, when you rewrite your meta try to include this : font-src 'self' data:; in the content. Something like this : meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; default-src 'self' ....... >

This is very probable to be a browser issue. You should respect some precises formats, probably. Please check the post I attached in the beginning in the answer and try all the solutions suggested there. Hope this will help you !

functions are called but do not work as expected. Where is the cause?

1 Answers1