Javascript Web包开发服务器未代理请求

问题是WebpackDevServer根本没有将请求代理到我的API

我的设置是，我有一个根目录为webpack.config.js的repo，以及一个包含所有前端内容的客户端目录，然后其他目录与我的express服务器相关。在我将前端代码移动到与express服务器相同的目录之前，它最初是在它自己的、单独的repo中，然后它就可以代理了

当我说“不工作”时，我的意思是：webpack dev server在localhost:9000上启动应用程序的前端，当我向

/api/foo

发出请求时，它尝试请求

localhost:9000/api/foo

而不是

localhost:3100/api/foo

，并在浏览器控制台中显示504错误。所以WebpackDev服务器正在工作，它根本不做任何代理。以下是我认为相关的代码：

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

---

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

webpack开发服务器--打开--模式开发和npm运行服务器：dev

---

所以webpack dev server正在运行，但我认为它从来没有进入第二部分，那就是

npm run server:dev

——启动我的服务器的东西。感谢Phil对我的问题发表评论并建议我尝试与postman一起使用API，这让我意识到服务器没有运行，也让我意识到了错误。

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

webpack开发服务器--打开--模式开发和npm运行服务器：dev

---

所以webpack dev server正在运行，但我认为它从来没有进入第二部分，那就是

npm run server:dev

——启动我的服务器的东西。感谢Phil，他对我的问题发表了评论，并建议我尝试与postman一起访问API，这让我意识到服务器没有运行，这让我意识到了错误。

504响应状态表明它实际上正在代理您的API（或其他）。如果不是，你会得到404。看到API中的错误日志了吗？我想是代理配置中的

**

。文档中的情况与此不同~因为您没有使用HTTPS，而且不太可能使用命名虚拟主机，请尝试使用代理：{'/api'：'http://localhost:3100“}您将在浏览器中看不到代理地址。据它所知，它提出了相同的原产地要求；代理发生在无形中。您能否确认您可以使用

curl

或Postman访问API？显然，如果无法访问代理服务器，Webpack将返回504响应。一定要试试curl或Postman，例如

curl-v-X POSThttp://localhost:3100/api/auth/login

。或者，尝试在您的API服务器上启用CORS（使用Express中间件非常容易），并直接从JSA 504发出请求响应状态表明它实际上是代理到您的API（或其他）。如果不是，你会得到404。看到API中的错误日志了吗？我想是代理配置中的

**

。文档中的情况与此不同~因为您没有使用HTTPS，而且不太可能使用命名虚拟主机，请尝试使用代理：{'/api'：'http://localhost:3100“}您将在浏览器中看不到代理地址。据它所知，它提出了相同的原产地要求；代理发生在无形中。您能否确认您可以使用

curl

或Postman访问API？显然，如果无法访问代理服务器，Webpack将返回504响应。一定要试试curl或Postman，例如

curl-v-X POSThttp://localhost:3100/api/auth/login

。或者，尝试在API服务器上启用CORS（使用Express中间件非常容易），并直接从JS发出请求