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

回答

相關問題