Express服務器提供我的靜態文件，但不處理對我的API的請求。 怎么了？

Question

我在公司的API上構建了一個小應用程序。 我創建了自己的API來與他們的互動。 我的應用程序使用React-Create-App搭建Redux，服務器是Experss / Node.js。 它在localhost上完全正常工作但是當我在Heroku上部署它時，它服務於bundle但不向服務器發送任何用戶http請求。 它返回404未找到。 Heroku在日志中沒有錯誤。

我的安裝后腳本運行構建，它捆綁了應用程序。 我也在heroku儀表板中設置了環境端口變量。

的package.json

 { "name": "event.me", "version": "0.1.0", "private": true, "engines":{ "node": "7.2.1", "npm": "3.10.10" }, "dependencies": { "axios": "^0.15.3", "body-parser": "^1.17.1", "express": "^4.15.2", "moment": "^2.18.1", "react": "^15.4.2", "react-dom": "^15.4.2", "react-progressbar.js": "^0.2.0", "react-redux": "^5.0.3", "react-router": "^3.0.0", "react-router-dom": "^4.0.0", "redux": "^3.6.0", "redux-logger": "^3.0.0", "redux-thunk": "^2.2.0" }, "devDependencies": { "eslint": "^3.18.0", "eslint-config-airbnb": "^14.1.0", "eslint-plugin-jsx-a11y": "^4.0.0", "eslint-plugin-react": "^6.9.0", "eslint-plugin-import": "^2.2.0", "nodemon": "^1.11.0", "react-scripts": "0.9.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "server": "node server/server.js", "postinstall": "npm run build" } } 

server.js文件

 const express = require('express'); const path = require('path'); const bodyParser = require('body-parser'); const routes = require('./routes'); const app = express(); app.use(express.static(path.resolve(__dirname, '..', 'build'))); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use('/api', routes); const port = process.env.PORT || 8080; app.listen(port, () => console.log(`Listening on ${port}`)); 

routes.js

 const routes = require('express').Router(); const users = require('./controllers/users.js'); const events = require('./controllers/events.js'); routes.post('/sigin', users.signin); routes.post('/signup', users.signup); routes.get('/events', events.getAll); routes.post('/events', events.attendEvent); routes.delete('/events', events.flakeEvent); routes.patch('/events', events.updateEvent); routes.delete('/singleevent', events.deleteEvent); routes.post('/createevent', events.createEvent); module.exports = routes; 

Answer 1

如果您正在使用Create React App，那么在調用API時要將Webpack用作代理時必須執行的操作之一是在package.json設置：

...
"proxy": "http://localhost:3030",
...

因此，您使用Create React App中包含的Webpack來代理對API的所有調用，而不需要額外的服務器。 對於Heroku部署，您需要更改Heroku URL的localhost和Express服務器（process.env.PORT）中已建立端口的3030。
這就是我認為問題所在。

此外，您必須將非API請求路由到index.html。 將其添加到您的server.js 。

app.get('*', (req, res) => {
    const way = path.join(__dirname, 'build', 'index.html');
    res.sendFile(way);
  });