如果从域调用，则不执行Firebase函数

Question

我有一个使用NodeJS创建的Firebase后端的React应用程序。我使用Firebase函数。当我从本地主机或邮递员调用它们时，我的Firebase函数将执行。但是当我从我的域(moonio.io)调用函数时，它们没有被执行，唯一发生的事情就是我得到了我的index.js文件。因此，我怀疑我的问题是由于firebase.json文件的宿主部分(api地址"https://europe-west3-cryptocurrency-tracker-moonio.cloudfunctions.net/api“被重写为"/index.html")中的重写造成的？

firebase.json

{
  "hosting": [
    {
      "target": "app",
      "public": "app/build",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ],
  "functions": {
    "source": "functions"
  }
}

用于Firebase函数的package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "index.js",
  "dependencies": {
    "axios": "^0.21.1",
    "express": "^4.17.1",
    "firebase": "^8.1.1",
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.13.1",
    "google-auth-library": "^6.1.3",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-plugin-promise": "^4.0.1",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

我的React应用程序的package.json

{
  "name": "cryptotracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.13",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "axios": "^0.20.0",
    "chart.js": "^2.9.4",
    "chartjs": "^0.3.24",
    "colorthief": "^2.3.2",
    "cra-template": "1.0.3",
    "firebase": "^8.2.3",
    "history": "^5.0.0",
    "install": "^0.13.0",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.20",
    "npm": "^6.14.10",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.11.1",
    "react-dom": "^16.13.1",
    "react-google-login": "^5.2.2",
    "react-hook-form": "^6.9.1",
    "react-loading-skeleton": "^2.1.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-virtualized-select": "^3.1.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "retry-axios": "^2.3.0",
    "styled-components": "^5.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "https://europe-west3-cryptocurrency-tracker-moonio.cloudfunctions.net/api"
}

Answer 1

许多小时后，我终于发现了这个问题。

1. 需要将另一个重写添加到firebase.json文件中，以处理firebase.json文件。对api的所有请求都必须转到Firebase函数中相应的api函数，所有其他请求都将按照单页应用程序的要求转到index.html。因此，firebase.json的重写部分需要如下所示：

"rewrites": [
        {
          "source": "/api/**",
          "function": "api"
        },
        {
          "source": "!/api/**",
          "destination": "/index.html"
        }
      ]

1. package.json文件中的代理仅用于开发目的。它不会在生产中起作用。只要您设置了自定义域，Firebase就会自动将此域链接到您的函数。因此，由于我的自定义域是moonio.io，所以可以通过向moonio.io/api/< functions >发送请求来执行Firebase函数。要使这些端点的请求正常工作，还必须将"/api“包含在node.js函数设置中的request中。我使用的是express，所以我的index.js文件的一个示例函数如下(注意"/api“是url的一部分)：

const app = require("express")();
const functions = require("firebase-functions");

app.post("/api/signin", signIn);

exports.api = functions.region("us-central1").https.onRequest(app);

此外，在从前端向Firebase函数发出请求时，必须在url的开头包含“”，就像我在以下示例函数中所做的那样：

axios.post("/api/signin", userData)

1. Firebase函数仅适用于us-
2. 1中的Firebase宿主。如果您正在使用其他位置，请根据第2部分.

中的代码示例对其进行更改。