Express，webpack-dev-sever找不到React index

我是Express和服务器端的一般新用户，对于我的小型反应消息应用程序，我使用Express作为后端（一个json文件）和webpack dev前端服务器。如果我只是开始Webpack服务器，应用程序显示正确，probelems来，当我尝试使这两个工作在一起，我认为问题是webpack-dev-server的代理配置。Express，webpack-dev-sever找不到React index

这里是我的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); 
    }); 
}

这是的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。我得到了：“不能得到/”

任何帮助吗？ :)

来源

2016-04-14 Giorgia Sambrotta

Got it！这里的*符号表示：使用“*”代表到指定服务器的所有路径。

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

这使我的索引不确定。

所以我要对关键点的地方，我的JSON（或API）住：

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

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

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

来源

2016-04-19 15:27:54

Express，webpack-dev-sever找不到React index

回答

相关问题