webpack 开发服务器不允许 POST 获取请求 - 反应应用答案

【问题标题】：webpack dev server not allowing POST fetch request - react appwebpack 开发服务器不允许 POST 获取请求 - 反应应用
【发布时间】：2018-05-01 18:53:35
【问题描述】：

我正在使用 webpack-dev-server 开发我的第一个 webapack-react 应用程序，但是我遇到了向我的烧瓶后端 api 发送 POST 请求的问题，因为我不断收到 400 错误请求错误。这是我的发帖请求：

  fetch('/api/login', {
   method: 'post',
   headers: {'Content-Type':'application/json'},
   body: JSON.stringify({"first_name": "name"})
  });

如果我将上述内容调整为 GET 请求（并删除正文），则请求会正常执行，并且我 api 返回数据。

再深入一点，似乎 webpack-dev-server 不允许 POST 请求 - 我是否理解正确并且有解决方法？

这是我的 webpack 开发配置：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    host:'0.0.0.0',
    hot: true,
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'http://flaskapp:5090',
        pathRewrite: {'^/api': ''},
        secure: false,
      }
    },
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
});

【问题讨论】：

前几天我遇到了同样的问题。我发现如果我从 webpack 开发服务器中的代理中删除路径重写并只使用 /api 路径，我的获取请求就可以工作。
我试了一下，但它似乎对我不起作用 - 仍然遇到旧的 400 (BAD REQUEST) 问题。这似乎很奇怪，我原以为在任何广泛采用的框架中发出帖子请求的能力都是标准的
如果有帮助，我可以发布我的 webpack.config 文件。
那太好了？！我花了几个小时尝试各种事情都无济于事，所以现在非常感谢任何建议！

标签： reactjs post webpack webpack-dev-server

【解决方案1】：

这绝不是公认的答案。我只是将我的 Webpack 文件分享给我如何让它工作。

这是我的 webpack.config 文件。前几天我在使用 POST 进行获取请求时遇到了同样的问题。但是，我上网查看是否可以从我的 fetch 请求中删除 /api，所以我尝试了 rewrite 模块，但它对我不起作用，所以我把它删除了。在我的 fetch 请求中，如果我想获取某些东西，例如它会是 /api/signup 并且我的 fetch 工作。我还在 webpack 中设置了我的代理，而不是在 package.json 中

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const HtmlWebPackPlugin = require('html-webpack-plugin');

var browserConfig = {
    devServer: {
        historyApiFallback: true,
        proxy: {
            "/api": "http://localhost:3012"
        }
    },
    entry: ['babel-polyfill', __dirname + '/src/index.js'],
    output: {
        path: path.resolve(__dirname + '/public'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'env', 'stage-0']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './public/index.html',
        })
    ]
}

var serverConfig = {
    target: 'node',
    externals: [nodeExternals()],
    entry: __dirname + '/server/main.js',
    output: {
        path: path.resolve(__dirname + '/public'),
        filename: 'server.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'env', 'stage-0']
                    }
                }
            }
        ]
    }
}

module.exports = [browserConfig, serverConfig]

【讨论】：