Webpack 5 Dev Server 代理似乎被忽略了

Question

首先，这在 webpack 4 中运行良好。升级到 webpack 5 后，除了开发服务器代理外，一切似乎都很好。就像我输入的任何值都被完全忽略了一样。

我得到的只是以下错误 尝试代理时发生错误：localhost:3006/api/configuration

我也曾经从开发服务器注销过，但这似乎也被忽略了。 EG“从 localhost:3006 代理到 localhost:5050

版本：

• 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

我不确定 webpack 4，但我认为您需要使用

changeOrigin

因为您在服务器和 webpack 开发服务器中使用默认端口。

如果您的服务器中没有有效的 SSL，您可能还需要设置

secure: false

。

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

Answer 2

与 webpack 5 (5.76.0) 相同的问题
尝试从 localhost:3000 代理到 localhost:8080

changeOrigin: true

对我不起作用，我想这是一个错误。

我花了几个小时，只找到一个可行的解决方案
使用 localhost 作为开发服务器，使用 127.0.0.1 作为代理

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

Answer 3

信息： 我从来没有得到任何建议的工作答案。但是使用路由器而不是目标就可以了：

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