Question

我正在使用webpack-dev-server开发我的第一个webapack-react应用程序，但是我遇到了向我的flask后端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 dev配置：

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()
  ]
});

Answer 1

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

这是我的webpack.config文件。前几天我用POST进行获取请求时遇到了同样的问题。但是，我在线查看是否可以从我的提取请求中删除/api，因此我尝试了重写模块，但它并没有为我工作所以我只是将其删除了。在我的获取请求中，如果我想获取某些东西，例如它将是/ api / signup，例如我的fetch工作。我还在webpack中设置了我的代理，而不是在package.json

中

＆＃13;

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]

＆＃13;

webpack dev服务器不允许POST获取请求 - 反应应用程序

1 个答案: