使用 Express API 和 ReactJS SPA 进行路由

Question

我最近在 Heroku 上使用 React 部署了一个站点。在浏览器的控制台中，我收到了 html 文本的输出，而不是我的用户界面 javascript。链接到我的站点 链接到存储库我认为问题根源于我的 server.js 路由来为我的 index.html 提供服务服务器.js// Allows us to place keys and sensitive info in hidden .env filerequire("dotenv").config();// Require Packagesconst express = require("express");const app = express();const morgan = require("morgan")const db = require("./models");const routes = require("./routes");const passport = require("passport");const session = require("express-session")const path = require("path");const MySQLStore = require("express-mysql-session")(session);require("./config/passport")(passport)app.use(express.urlencoded({ extended: true }));app.use(express.json());let options = {};if (process.env.NODE_ENV === 'production') {    options = {        host: process.env.HOST,        port: 3306,        user: process.env.USER,        password: process.env.PASSWORD,        database: process.env.DB    }} else {    options = {        host: 'localhost',        port: 3306,        user: 'root',        password: process.env.DB_PASSWORD,        database: 'tracker'    }}// Options for mysql session storelet sessionStore = new MySQLStore(options);// Pass in mysql session storeapp.use(session({    key: 'surfing_dogs',    secret: 'surfing_dogs',    store: sessionStore,    resave: false,    saveUninitialized: false}))app.use(passport.initialize());app.use(passport.session());app.use(morgan('common'))// THIS IS REALLY IMPORTANT FOR ROUTING CLIENT SIDE// We want to have our app to use the build directory app.use(express.static(__dirname + '/client/build'))// For every url request we send our index.html file to the routeapp.get("/*", (req, res) => {    res.sendFile(path.join(__dirname, "client", "build", "index.html"));});app.use(routes)详细说明，我将此路由放置在我的 server.js 中，因为我有客户端路由，并且我想欺骗浏览器始终为 index.html 提供服务我想解决这个问题的另一个原因是我目前无法使用凭据登录我的网站。这是前端明智的登录过程的一小部分。我的目标是基于登录状态，但不幸的是登录状态没有改变。

Answer 1

查看您的 server.js 存储库后，您将所有到达服务器的流量（甚至是您自己的 api 请求）发送到前端。

首先确保您的服务器端路由以可区分的内容开头，例如

app.get('/api/*',(req,res)=>/*somecode*/)

这是因为您的服务器会混淆诸如“/login”之类的东西，如果它也是您前端的一条路由，并且最终只会根据定义它们的时间来服务一个或另一个。

然后更新你的 server.js 以匹配它，它应该可以工作：

//API Requests handled first

require('./routes')(app);

//Non api requests in production

if (process.env.NODE_ENV === 'production') {

    app.use([someProductionMiddleware()])

    // Express will serve up production assets i.e. main.js

    app.use(express.static('client/build'));

    // If Express doesn't recognize route serve index.html

    const path = require('path');

    app.get('*', (req, res) => {

        res.sendFile(

            path.resolve(__dirname, 'client', 'build', 'index.html')

        );

    });

}