Question

我是Express和服务器端的新手，对于我的小反应消息应用程序，我使用Express作为后端（json文件）和webpack dev服务器用于前端。如果我只启动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);
}

我的filetree看起来像：

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

两台服务器都正常启动，并且它们不会在终端中出现任何错误我可以访问localhost：4000 /消息我无法访问localhost：4001。我得到了：＆＃34;无法获得/＆＃34;

有什么帮助吗？：）

Answer 1

知道了！此处的*符号表示：使用“*”代理指定服务器的所有路径。

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

这使我的索引未定义。

所以我必须把钥匙指向我的json（或api）居住的地方：

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

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

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

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

1 个答案: