node 和 reactjs axios 服务器请求返回 index.html 文件而不是 json

Posted 2023-03-28

【中文标题】node 和 reactjs axios 服务器请求返回 index.html 文件而不是 json

【英文标题】：node and reactjs axios server request returning index.html file instead of json

【发布时间】：2018-05-18 03:48:46

【问题描述】：

我已经使用 webpack 编译的 react 前端和在 node 和 express 上运行的服务器设置了我的项目。

当我部署到生产环境时，我对服务器的请求将返回“dist”文件夹中的 index.html 文件，而不是带有数据的 json。

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

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

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 配置文件的一部分：

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（在开发中测试）：

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 文件。

有什么帮助吗？

干杯

【问题讨论】：

axios 请求是什么样的？

我已经用 axios 请求更新了问题

您是否在 express 中定义了一个端点来处理此路由？

是的，端点 api/chefs 在我的厨师路由中并处理此端点

【参考方案1】：

也许这是有问题的行：

app.get('/*', (req, res) => 
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
);

因为这会捕获您的所有请求。如果您将 /* 更改为 / 会解决问题吗？

我认为请求无法到达您的路由器，因为/* 捕获所有请求并返回 index.html 页面。

尝试：

app.get('/', (req, res) => 
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
);

【讨论】：

最初我在这里使用的是以前的代码 sn-p 但它并没有什么不同。我将更新问题的代码以使用正确的语法。

经过 7 小时徒劳的调试，这对我来说是成功的！确保在尝试此修复之前从应用程序中删除“公共”文件夹，否则，您将不断被重定向到公共文件夹内的 index.html（除非您明确配置应用程序）

【参考方案2】：

根据webpack docs，可以指定代理设置如下

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

注意“/api”而不是“/api/**”。

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