node 和 reactjs axios 服务器请求返回 index.html 文件而不是 json [英] node and reactjs axios server request returning index.html file instead of json

问题描述

我已经使用由 webpack 编译的 React 前端以及在 node 和 express 上运行的服务器设置了我的项目.

I have setup my project with a react frontend being compiled by webpack and the server running on node and express.

当我部署到生产环境时，我对服务器的请求返回的是dist"文件夹中的 index.html 文件，而不是包含数据的 json.

When I deploy to production my requests to the server are returning the index.html file in the 'dist' folder rather than the json with the data.

我的 webpack 编译输出位于 ./dist 位置.

My webpack compiled output is at the location ./dist.

这是我的 server.js 文件的路由部分:

Here is the routing part of my server.js file:

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

这是我的 webpack 配置文件的一部分:

Here is part of my webpack config file:

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: {
    inline: true,
    contentBase: './dist',
    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]
};

我的请求如下(api路由/api/chefs返回一个带有用户配置文件的json(在开发中测试):

My request is as follows (the api route /api/chefs returns a json with user profiles (tested in development):

export function listChefs() {
  return function (dispatch) {
    axios.get('/api/chefs')
      .then((response) => {
        dispatch({
          type: LIST_CHEFS,
          payload: response.data
        });
      })
      .catch((err) => {
        errorHandler(dispatch, 'There was a problem. Please refresh and try again.');
      });
  };
}

似乎我使用 axios 从我的客户端发出的调用实际上访问了未被识别的 api url，因此被重定向到简单的服务器 index.html 文件.

It seems as though the call that I am making from my client using axios is actually hitting the api url that isn't being recognised and therefore is being redirected to simply server the index.html file.

有什么帮助吗?

干杯

推荐答案

根据 webpackdocs，您可以指定代理设置如下

According to the webpack docs, you can specify the proxy setting as follows

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
}

注意/api"而不是/api/**".

Notice the "/api" rather than "/api/**".

另外，值得注意的是，他们建议通过 path.join(__dirname, "dist") 使用绝对路径作为 contentBase 设置.

Also, it may be worth noting that they recommend using absolute paths via path.join(__dirname, "dist") for the contentBase setting.

这篇关于node 和 reactjs axios 服务器请求返回 index.html 文件而不是 json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！