Webpack devServer不代理请求[关闭]答案

【问题标题】：Webpack devServer not proxying requests [closed]Webpack devServer不代理请求[关闭]
【发布时间】：2020-04-07 08:36:44
【问题描述】：

问题在于 webpack-dev-server 根本没有将请求代理到我的 API。

我的设置是我有 1 个以 webpack.config.js 为根的 repo，当然还有一个包含我所有前端内容的客户端目录，然后其他目录与我的 express 服务器相关。前端代码最初是在它自己的独立仓库中，然后我将它移动到与 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(),
    ],
};

【问题讨论】：

504 响应状态表明它实际上是通过您的 API（或其他东西）进行代理。如果不是，您将收到 404。您是否从 API 中看到任何错误日志？
我认为这是您代理配置中的**。文档里好像不是这样的~webpack.js.org/configuration/dev-server/#devserverproxy
由于您没有使用 HTTPS，而且您不太可能使用命名虚拟主机，请尝试 proxy: { '/api': 'http://localhost:3100' }
您不会在浏览器中看到代理地址。据它所知，它正在发出同源请求；代理是在无形中发生的。您能否确认您可以使用curl 或 Postman 访问 API？
显然，如果 Webpack 无法到达代理服务器，它会返回 504 响应。绝对尝试使用 curl 或 Postman，例如 curl -v -X POST http://localhost:3100/api/auth/login。或者，尝试在您的 API 服务器上启用 CORS（使用 Express 中间件非常容易）并直接从 JS 发出请求

标签： javascript node.js webpack webpack-dev-server

【解决方案1】：

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

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

所以 webpack-dev-server 正在运行，但我认为它没有进入第二部分，即 npm run server:dev - 启动我的服务器的东西。感谢 Phil 对我的问题发表评论并建议我尝试使用邮递员访问 API，这让我意识到服务器没有运行，这让我意识到错误。

【讨论】：