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

score 3 · Accepted Answer · answered Jan 01 '22 at 10:55

3

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,
  },
},

answered Jan 01 '22 at 10:55

Amir

996
7
17

I already have `changeOrigin: true`, and it's still not working. – John Manko Jan 16 '22 at 22:19
@JohnManko You didn't have it in OP. I have tried your config with `changeOrigin: true` and `secure: false` and it worked for me! Are you still getting the same error? – Amir Jan 17 '22 at 07:29
@Amir Sorry for the slow response but this worked! I needed both `changeOrigin: true` and `secure: false`. Thanks for your help. My API was also missing the prefix EG localhost/config needed to be localhost/api/config. Hope that helps others too – Kurtis Jan 22 '22 at 11:56

user255319 · Answer 2 · 2023-05-01T18:15:36.613

1

Same issue with webpack 5 (5.76.0)
When trying to proxying from localhost:3000 to localhost:8080

changeOrigin: true not working for me, I guess this is a bug.

I spended few hours and found only one worked solution
Using localhost for dev server and 127.0.0.1 for proxy

  devServer: {
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080/',
      }
    }
  }

edited May 01 '23 at 18:15

answered May 01 '23 at 18:14

user255319

11
2

+1 for your solution. Also, it looks like there's an open issue for this. Maintainers want a minimum reproducible though; they don't yet recognize it as an issue I think. https://github.com/webpack/webpack-dev-server/issues/4828 – Adam Easterling May 10 '23 at 20:02

score 0 · Answer 3 · answered May 12 '23 at 04:07

0

For information: I never got any of the suggested answers to work. But using router instead of target did the trick:

proxy: {
    '/api': {
        router: () => 'http://www.something-else.com/',
        logLevel: 'debug'
    }
}

answered May 12 '23 at 04:07

Xavier Follet

191
2
6

Webpack 5 Dev Server proxy seems to be ignored

3 Answers3