webpack-dev-server ，用 ngrok 进行转发，请求后端的链接无效

Question

问题

用 localhost 打开应用，在 network 是可以看到请求的详情。然后用 ngrok 进行转发打开，是看不到请求的。

上面第一张图，是有请求链接的详情出现，但是用 ngrok 链接打开后，是没有的。我在接口打了断点，是没有请求到后端的。

之前用旧一套的 vue-cli 模板，ngrok 代理是没有问题的。现在用了新版本，却不行了。webpack-dev-server 的配置有区别，我也查看了文档和搜索了下，也没有找到相关的解决方法。

环境

• node: v8.9.3
• webpack: v3.6.0
• webpack-dev-server: v2.9.1

使用 vue-cli v2.9.2 模板生成的。

webpack.dev.conf.js ，devServer 配置

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    },
    disableHostCheck: true,
    public: 'xxx.ngrok.xxx' // ngrok 的地址
  }

// 启动命令：
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

Answer 1

配置的代理在实际请求时是看不到的。

504一般都是参数传递的有问题。

你可以采用一些接口调试工具，比如 postman 、 Restlet client等。将接口调试通。然后再使用Proxy调。
另外呢，webpack提供了proxy，你没必要再使用ngrok了。