node.js - Heroku：显示 json 数据而不是 UI

Question

我的应用程序在本地工作，但一旦部署到 Heroku，除了显示 json 数据而不是 UI 的主页外，每个页面都可以工作。在此页面上，我列出了数据库中的帖子，因此数据库中的帖子显示为 json 数据。

我尝试在发布路由之前添加'/post'阻止 api 在'/'路由上返回 html，但现在我遇到了这个问题。无论我更改什么，它都会在这两个问题之间不断切换 - 要么显示 json 数据，要么返回 index.html 而不是数据。

我怎样才能解决这个问题？谢谢！

该特定页面的路线（这是第一条路线）： <Route path="/posts/" exact component={Home} />

服务器.js

// imports
...

require("dotenv").config();

// import routes
const authRoutes = require("./routes/auth");
const userRoutes = require("./routes/user");
const postRoutes = require("./routes/posts");
// app
const app = express();

// connect db
const url = process.env.MONGODB_URI 
mongoose.connect(url, {
  useNewUrlParser: true,
  useCreateIndex: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
});
mongoose.connection
  .once("open", function () {
    console.log("DB Connected!");
  })
  .on("error", function (error) {
    console.log("Error is: ", error);
  });

// middlewares
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", '*');
  res.header("Access-Control-Allow-Credentials", true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
  next();
});

//middleware 
...

 // routes middleware
//  app.use(express.static(path.join(__dirname, './client/build')))

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
}
app.use(authRoutes);
app.use(userRoutes);
app.use('/post', postRoutes);

app.get("/*", function (req, res) {
  res.sendFile(path.join(__dirname, "./client/build/index.html"));
});

const port = process.env.PORT || 80;

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

ListPosts.js

// imports
...

import { API } from "../config";

class ListPosts extends React.Component {
  state = {
    title: "",
    body: "",
    date: "",
    posts: [],
  };

  componentDidMount = () => {
    this.getPosts();
  };

  getPosts = () => {
    axios
      .get(`${API}/post/`)
      .then((response) => {
        const posts = response.data;
        this.setState({ posts });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  displayPosts = (posts) => {
    if (!posts.length) return null;
     return posts.map((post, index) => (
    ...
    ));
  };

  render() {
    return <div>{this.displayPosts(this.state.posts)}</div>;
  }
}

export default ListPosts;

列出路由/控制器

router.get("/", list);

exports.list = (req, res) => {
  const sort = { title: 1 };
  Post.find()
    .sort(sort)
    .then((posts) => res.json(posts))
    .catch((err) => res.status(400).json("Error: " + err));
};

标签： node.jsreactjsheroku