CODEWITHSUNDEEP
firebasegoogle-cloud-functionsfirebase-hosting
Ajay Sivan
Ajay Sivan

Reputation: 2999

Firebase hosting rewrites to functions not working as expected

I am building a static website with HTML, CSS & JS and hosted on firebase hosting and connected a custom domain. The only serverside function I need is to send mail from the contact form. For this, I am trying to use Firebase cloud function. I have initialized functions on the same project and trying to use firebase hosting rewrites to rewrite the request to mydomain.com/contact to the contact function. But when I try to access the mydomain.com/contact in the browser it shows the below 403 Forbidden error message.

Error: Forbidden
Your client does not have permission to get URL /contact/contact from this server.

firebase.json

{
  "hosting": {
    "public": "build",
    "rewrites": [{
      "source": "/contact",
      "function": "contact"
    }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  }
}

The cloud function (not implemented the actual logic)

import * as functions from 'firebase-functions';

exports.contact = functions.https.onRequest((request, response) => {
    response.send("<h1>Contact<h1>");
});

I am using Firebase spark plan.

Upvotes: 0

Views: 6075

Answers (2)

Prenna
Prenna

Reputation: 11

I had the same issue this week. I had a rewrite from /user to a function called user and I was getting the response Your client does not have permission to get URL /user/user from this server.

I just deleted the functions from the firebase console then deployed them again and now they work. There must be some occasional bug with deploying functions like this and/or using hosting rewrites where the rewrite path gets appended to the function url path on the server.

Upvotes: 1

Siri
Siri

Reputation: 1126

This works for me:

"rewrites": [
    {
      "source": "**",
      "function": "myApp"
    }
  ]

And in the express function,

import * as functions from 'firebase-functions';
import express from 'express';
const app = express();

app.get('/contact', (req, res) => {
  res.send("<h1>Contact<h1>");
};

export const myApp = functions.https.onRequest(app);

Upvotes: 2

Related Questions