Question

我目前已配置webpack来编译我的react app和nodejs作为带有快速中间件的服务器。

每次我刷新生产路线例如/厨师时都会返回获取错误。

这是我的server.js配置：

authRoutes(router);
reservationRoutes(router);

// Use our router configuration when we call /
if (process.env.NODE_ENV === 'production') {
  app.use(express.static('dist'), router);
  app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
  });
} else {
  app.use('/', router);
}

// starts the server and listens for requests
app.listen(config.port, () => {
  console.log(`api running on port ${config.port}`);
});

// db config
mongoose.connect(config.database, {
  useMongoClient: true,
});

这是webpack配置：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/client/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './client/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  devServer: {
    historyApiFallback: true,
    inline: true,
    contentBase: './client',
    port: 8080,
    proxy: { '/api/**': { target: 'http://localhost:3000', secure: false } }
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['es2015','react'], plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread']}},
        {test: /\.jpe?g$|\.gif$|\.svg$|\.png$/i, loader: 'file-loader?name=/images/[name].[ext]'},
        {test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader','resolve-url-loader']},
        {test: /\.scss$/, loaders: ['style-loader', 'css-loader','postcss-loader', 'sass-loader','resolve-url-loader']}
        ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

这是错误日志，它是404：

2018-01-16T11:13:48.917673+00:00 heroku[router]: at=info method=GET path="/chefs" host=testapp.herokuapp.com request_id=ae107e20-d796-485b-8ffb-0a4f6759e876 fwd="86.169.30.58" dyno=web.1 connect=0ms service=2ms status=404 bytes=754 protocol=https

注意：所有api路由都以'api /'开头。但是，所有路由都期望主页索引路由在页面刷新时返回“get”错误，这只发生在生产中。

任何帮助？

Answer 1

事实证明这部分代码是问题所在：

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('dist'), router);
  app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
  });
} else {
  app.use('/', router);
}

其中唯一被重定向到index.html的路由是'/'。解决方法是在斜线上添加*后，取出在api上找不到的所有路径。

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('dist'), router);
  app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
  });
} else {
  app.use('/', router);
}

Answer 2

客户端路由由index.html处理，因此/index.html#/chefs应该有效，您可以使用HashRouter生成此类网址。

如果您希望/chefs有效，则必须将所有非/api流量发送至index.html并使用BrowserRouter

刷新页面时返回'get'错误的所有路由 - nodejs，用webpack表示api和reactjs客户端

2 个答案: