Webpack devServer不代理请求

Question

我已经检查了可以在SO（以及其他所有地方）上找到的所有答案，但我仍然无法解决此问题，因此，我们将不胜感激。问题是webpack-dev-server根本没有将请求代理到我的API。

我的设置是，我的根目录当然有1个webpack.config.js仓库，还有一个包含我所有前端内容的客户端目录，然后其他目录与我的Express服务器相关。前端代码最初位于其自己的单独存储库中，然后再将其移至与快递服务器相同的目录中，然后可以进行代理。

[当我说“不起作用”时，我的意思是：webpack-dev-server在localhost：9000上旋转应用程序的前端，当我向/api/foo发出请求时，它将尝试请求localhost:9000/api/foo而不是localhost:3100/api/foo，并在浏览器控制台中显示504错误。因此webpack-dev-server可以正常工作，它根本不做任何代理。我认为这是相关代码：

// webpack.config.js

const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    entry: "./client",
    output: {
        publicPath: '/',
        path: path.join(__dirname, './build'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                    },
                ],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/',
                        },
                    },
                ],
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './',
        overlay: true,
        port: 9000,
        compress: true,
        proxy: {
            '/api/**': {
                target: 'http://localhost:3100',
                secure: false,
                changeOrigin: true,
            },
        },
    },
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebPackPlugin({
            template: './client/index.html',
            filename: './index.html',
        }),
        new CompressionPlugin(),
    ],
};

任何帮助，将不胜感激，因为我在这方面坚持了几天，并且已经尝试了所有资源。谢谢：）

Answer 1

对于遇到同一问题的任何人，由于我的npm脚本，这对我来说似乎是一个非常愚蠢的错误。这是我的脚本：

webpack-dev-server --open --mode development && npm run server:dev

所以webpack-dev-server正在运行，但我认为它没有涉及到第二部分npm run server:dev-启动服务器的事情。感谢Phil回答我的问题并建议我尝试用邮递员访问API，这使我意识到服务器未运行，并让我意识到了错误。