Express，网页包开发服务器不'；找不到反应指数

一般来说，我对Express和服务器端非常陌生，对于我的小型react消息应用程序，我使用Express作为后端（一个json文件），使用webpack dev server作为前端。 如果我只启动Webpack服务器，应用程序会正确显示，当我尝试使两者一起工作时，会出现问题，我认为问题在于Webpack dev服务器的代理配置

这是我的express服务器，json-api-server.js：

var express = require('express');
var serveStatic = require('serve-static');
var fs = require('fs');
var path = require('path');
var bodyParser = require('body-parser');


module.exports = (PORT) => {

  const MESSAGES_FILE = path.join(__dirname, 'src/app/data/messages.json');
  const app = express();

  app.use(serveStatic(__dirname + '/build'));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({extended: true}));

  // Additional middleware which will set headers that we need on each request.
  app.use(function(req, res, next) {
      // Set permissive CORS header - this allows this server to be used only as
      // an API server in conjunction with something like webpack-dev-server.
      res.setHeader('Access-Control-Allow-Origin', '*');

      // Disable caching so we'll always get the latest comments.
      res.setHeader('Cache-Control', 'no-cache');
      next();
  });

  app.get('/messages', function(req, res) {
    fs.readFile(MESSAGES_FILE, function(err, data) {
      if (err) {
        console.error(err);
        process.exit(1);
      }
      res.json(JSON.parse(data));
    });
  });

  app.post('/messages', function(req, res) {
    fs.readFile(MESSAGES_FILE, function(err, data) {
      if (err) {
        console.error(err);
        process.exit(1);
      }
      var messages = JSON.parse(data);

      var newMessage = {
        id: Date.now(),
        body: req.body.body,
        date: req.body.date,
        from: req.body.from,
        to: req.body.to
      };
      messages.push(newMessage);
      fs.writeFile(MESSAGES_FILE, JSON.stringify(messages, null, 4), function(err) {
        if (err) {
          console.error(err);
          process.exit(1);
        }
        res.json(messages);
      });
    });
  });

  app.listen(PORT, function (err) {
    if (err) {
      return console.log(err);
    }
    console.log('Listening at' + PORT );
  });
}

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');


module.exports = (PORT) => {
  const backendPort = PORT - 1;
  const server = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    proxy: {
      '*' : {
        target: 'http://localhost:' + backendPort
      }
    }
  });
  server.listen(PORT, 'localhost', function (err) {
    if (err) {
      return console.log(err);
    }
    console.log('Listening at ' + PORT);
  });
}

var apiServer = require('./json-api-server');
var webpackServer = require('./webpack-server');

const PORT = process.env.PORT || 4001;
const PROD = process.env.NODE_ENV === 'production';

if (PROD) {
  apiServer(PORT);
} else {
  apiServer(PORT - 1);
  webpackServer(PORT);
}

这是webpack-server.js：

var express = require('express');
var serveStatic = require('serve-static');
var fs = require('fs');
var path = require('path');
var bodyParser = require('body-parser');


module.exports = (PORT) => {

  const MESSAGES_FILE = path.join(__dirname, 'src/app/data/messages.json');
  const app = express();

  app.use(serveStatic(__dirname + '/build'));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({extended: true}));

  // Additional middleware which will set headers that we need on each request.
  app.use(function(req, res, next) {
      // Set permissive CORS header - this allows this server to be used only as
      // an API server in conjunction with something like webpack-dev-server.
      res.setHeader('Access-Control-Allow-Origin', '*');

      // Disable caching so we'll always get the latest comments.
      res.setHeader('Cache-Control', 'no-cache');
      next();
  });

  app.get('/messages', function(req, res) {
    fs.readFile(MESSAGES_FILE, function(err, data) {
      if (err) {
        console.error(err);
        process.exit(1);
      }
      res.json(JSON.parse(data));
    });
  });

  app.post('/messages', function(req, res) {
    fs.readFile(MESSAGES_FILE, function(err, data) {
      if (err) {
        console.error(err);
        process.exit(1);
      }
      var messages = JSON.parse(data);

      var newMessage = {
        id: Date.now(),
        body: req.body.body,
        date: req.body.date,
        from: req.body.from,
        to: req.body.to
      };
      messages.push(newMessage);
      fs.writeFile(MESSAGES_FILE, JSON.stringify(messages, null, 4), function(err) {
        if (err) {
          console.error(err);
          process.exit(1);
        }
        res.json(messages);
      });
    });
  });

  app.listen(PORT, function (err) {
    if (err) {
      return console.log(err);
    }
    console.log('Listening at' + PORT );
  });
}

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');


module.exports = (PORT) => {
  const backendPort = PORT - 1;
  const server = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    proxy: {
      '*' : {
        target: 'http://localhost:' + backendPort
      }
    }
  });
  server.listen(PORT, 'localhost', function (err) {
    if (err) {
      return console.log(err);
    }
    console.log('Listening at ' + PORT);
  });
}

var apiServer = require('./json-api-server');
var webpackServer = require('./webpack-server');

const PORT = process.env.PORT || 4001;
const PROD = process.env.NODE_ENV === 'production';

if (PROD) {
  apiServer(PORT);
} else {
  apiServer(PORT - 1);
  webpackServer(PORT);
}

下面是server.js：

var express = require('express');
var serveStatic = require('serve-static');
var fs = require('fs');
var path = require('path');
var bodyParser = require('body-parser');


module.exports = (PORT) => {

  const MESSAGES_FILE = path.join(__dirname, 'src/app/data/messages.json');
  const app = express();

  app.use(serveStatic(__dirname + '/build'));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({extended: true}));

  // Additional middleware which will set headers that we need on each request.
  app.use(function(req, res, next) {
      // Set permissive CORS header - this allows this server to be used only as
      // an API server in conjunction with something like webpack-dev-server.
      res.setHeader('Access-Control-Allow-Origin', '*');

      // Disable caching so we'll always get the latest comments.
      res.setHeader('Cache-Control', 'no-cache');
      next();
  });

  app.get('/messages', function(req, res) {
    fs.readFile(MESSAGES_FILE, function(err, data) {
      if (err) {
        console.error(err);
        process.exit(1);
      }
      res.json(JSON.parse(data));
    });
  });

  app.post('/messages', function(req, res) {
    fs.readFile(MESSAGES_FILE, function(err, data) {
      if (err) {
        console.error(err);
        process.exit(1);
      }
      var messages = JSON.parse(data);

      var newMessage = {
        id: Date.now(),
        body: req.body.body,
        date: req.body.date,
        from: req.body.from,
        to: req.body.to
      };
      messages.push(newMessage);
      fs.writeFile(MESSAGES_FILE, JSON.stringify(messages, null, 4), function(err) {
        if (err) {
          console.error(err);
          process.exit(1);
        }
        res.json(messages);
      });
    });
  });

  app.listen(PORT, function (err) {
    if (err) {
      return console.log(err);
    }
    console.log('Listening at' + PORT );
  });
}

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');


module.exports = (PORT) => {
  const backendPort = PORT - 1;
  const server = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    proxy: {
      '*' : {
        target: 'http://localhost:' + backendPort
      }
    }
  });
  server.listen(PORT, 'localhost', function (err) {
    if (err) {
      return console.log(err);
    }
    console.log('Listening at ' + PORT);
  });
}

var apiServer = require('./json-api-server');
var webpackServer = require('./webpack-server');

const PORT = process.env.PORT || 4001;
const PROD = process.env.NODE_ENV === 'production';

if (PROD) {
  apiServer(PORT);
} else {
  apiServer(PORT - 1);
  webpackServer(PORT);
}

我的文件树看起来像：

--- /
----- server.js
----- webpack-server.js
----- json-api-server.js
----- src/
------- app/index.js
------- app/data/
-------------- messages.json

两台服务器都能正确启动，并且不会在终端中出现任何错误 我可以访问localhost:4000/条消息 我无法联系到localhost:4001。我得到：“得不到/”

有什么帮助吗？：）

明白了！ 此处的

*

符号表示：使用“*”代理指定服务器的所有路径

proxy: {
      '*' : {
        target: 'http://localhost:' + backendPort
      }
    }

这使得我的索引没有定义

因此，我必须指出我的json（或api）所在的位置：

作为参考，这也是一个有效的解决方案：

proxy: {
 '/messages': 'http://localhost:' + backendPort
}