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