webpack dev server not allowing POST fetch request - react app - reactjs

Question

I am developing my first webapack-react app using webpack-dev-server, however I am running into issues sending POST requests to my flask backend api as I keep getting a 400 bad request error. Here is my post request:
fetch('/api/login', {
method: 'post',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({"first_name": "name"})
});
If I tweak the above to a GET request (and remove body), the request goes through fine and I the api returns data.
Digging a little deeper, it seems as though webpack-dev-server doesn't permit POST requests - have I understood that correctly and is there a workaround?
Here is my webpack dev configuration:
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

This is by no means the accepted answer. I'm just sharing my Webpack file to how I got it to work.
Here is my webpack.config file. I had the same issue the other day with making fetch requests with POST. However, I looked online to see if I could remove the /api from my fetch requests so I tried the rewrite module and it didn't work for me so I just removed it. In my fetch requests if I wanted to fetch something for example it would be /api/signup for example and my fetch worked. I also set up my proxy in webpack not in 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]