Webpack 5 Dev Server proxy seems to be ignored

Question

Firstly, this worked great in webpack 4. After upgrading to webpack 5, everything seems fine except the dev server proxy. Its like whatever values I put in there are just outright ignored.

All I get is the following error Error occured while trying to proxy: localhost:3006/api/configuration

I also used to get logging out of the dev server but that seems to be being ignore too. EG "Proxying from localhost:3006 to localhost:5050

Versions:

• webpack - 5.65.0
• webpack-dev-server - 4.7.2
• webpack-cli - 4.9.1

Webpack.dev.js

const path = require("path");
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");

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

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

module.exports = merge(common, {
    mode: "development",
    devServer: {
        static: path.join(__dirname, "build"),
        historyApiFallback: true,
        port: 3006,
        proxy: {
            // '/api': 'https://localhost:5050',
            '/api': {
                target: 'https://localhost:5050',
                // pathRewrite: { '^/api': '' },
                secure: true,
            },
        },
        client: {
            logging: 'info',
            overlay: false,
        },
        hot: true,

    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            favicon: "./public/favicon.ico",
            title: "PBO Management | Dev | AWSM",
        }),
        new ReactRefreshWebpackPlugin({
            overlay: false,
        }),        
    ],
});

Answer 1

I'm not sure about webpack 4, but I think you need to use changeOrigin because you are using default ports in your server and webpack development server.

Also you might need to set secure: false if you don't have a valid SSL in your server.

proxy: {
  '/api': {
    target: 'https://localhost:5050',
    secure: false,
    changeOrigin: true,
  },
},