Express，webpack-dev-sever 没有找到 React 索引答案

【问题标题】：Express, webpack-dev-sever doesn't find React indexExpress，webpack-dev-sever 没有找到 React 索引
【发布时间】：2016-08-06 03:09:03
【问题描述】：

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

这是我的快递服务器，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 );
  });
}

这是 webpack-server.js：

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);
  });
}

这里是 server.js：

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/messages 我无法访问 localhost:4001。我得到了：“无法得到 /”

有什么帮助吗？ :)

【问题讨论】：

标签： express react-router webpack-dev-server

【解决方案1】：

知道了！这里*符号的意思是：使用“*”代理指定服务器的所有路径。

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

这导致我的索引未定义。

所以我必须将钥匙指向我的 json（或 api）所在的地方：

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

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

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

【讨论】：