Question

我在 Heroku 上部署我的 React 应用程序和服务器时遇到问题。我之前已经成功部署在 Heroku 上，但由于某种原因，我忘记了如何正确部署。网页显示但由于某种原因获取调用不起作用

我的文件结构是这样的

build
node_modules
public
src <=-=-= React app is here
env
Procfile
server.js

我的 Procfile 看起来像这样

web: node server.js

这是我的 package.json

  "scripts": {
    "start": "node server.js",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

我的 server.js 文件看起来像这样

const express = require("express");
const fetch = require("node-fetch");
const bodyParser = require("body-parser");
const methodOverride = require("method-override");
const cors = require("cors");
const app = express();
const path = require("path");
require("dotenv").config();
const PORT = process.env.PORT || 4000;

app.use(cors());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.json());

app.use(methodOverride("_method"));

app.get("/", async (req, res) => {
  try {
    const resp = await fetch(process.env.API_URL, {
      method: "GET",
      headers: {
        "x-api-key": process.env.API_KEY,
      },
    });
    const data = await resp.json();
    res.json(data);
  } catch (e) {
    res.json(e);
  }
});

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "build")));
  app.get("/*", (req, res) => {
    res.sendFile(path.join(__dirname, "build", "index.html"));
  });
}

app.listen(PORT, () => {
  console.log(`Example app listening at http://localhost:${PORT}`);
});

这是我的 env 文件

API_KEY=SOME_KEY
API_URL=SOME_URL

最后这里是我在 React 应用程序中的 fetch 调用的示例

  const fetchData = async () => {
    try {
      const resp = await fetch("http://localhost:4000");
      const data = await resp.json();
      data && setHadith(data);
    } catch (e) {
      setHadith(e);
    }
  };

我的错误消息及其指向我的 fetch 调用

react-dom.production.min.js:216 TypeError: Cannot read property '0' of undefined
    at I (Home.js:53)
    at al (react-dom.production.min.js:157)
    at $l (react-dom.production.min.js:180)
    at Hi (react-dom.production.min.js:269)
    at Pu (react-dom.production.min.js:250)
    at _u (react-dom.production.min.js:250)
    at xu (react-dom.production.min.js:250)
    at vu (react-dom.production.min.js:243)
    at react-dom.production.min.js:123
    at t.unstable_runWithPriority (scheduler.production.min.js:18)
ii @ react-dom.production.min.js:216
Home.js:53 Uncaught (in promise) TypeError: Cannot read property '0' of undefined
    at I (Home.js:53)
    at al (react-dom.production.min.js:157)
    at $l (react-dom.production.min.js:180)
    at Hi (react-dom.production.min.js:269)
    at Pu (react-dom.production.min.js:250)
    at _u (react-dom.production.min.js:250)
    at xu (react-dom.production.min.js:250)
    at vu (react-dom.production.min.js:243)
    at react-dom.production.min.js:123
    at t.unstable_runWithPriority (scheduler.production.min.js:18)

在 Heroku 上使用服务器部署 React 应用程序时遇到问题

0 个答案: