带有后端 api 的 webpack-dev-server答案

【问题标题】：webpack-dev-server with backend api带有后端 api 的 webpack-dev-server
【发布时间】：2016-06-02 23:36:55
【问题描述】：

我正在为一个 angularjs 应用程序使用 webpack-dev-server，我从 package.json 中的一个任务启动它，如下所示：

  "scripts": {
    "start-api": "node api/server.js",
    "dev": "webpack-dev-server --env dev --history-api-fallback --inline --progress --port 5000",
    "start": "npm run dev"
  },

我有一个使用 koa 并在同一个端口上运行的后端 api 服务器：

const koa = require('koa');

app.listen(5000);

module.exports.app;

当 koa 服务器启动时，它会拦截所有请求，我无法浏览到 Angular 浏览器应用程序。

我应该为 koa 提供所有服务，还是有办法让两者一起工作？

【问题讨论】：

标签： angularjs node.js webpack koa

【解决方案1】：

是的，您可以将 webpack-dev-server 与您自己的后端 API 一起使用。有两种方法可以做到这一点：

首先，您可以将开发服务器配置为使用proxy。这是我使用的解决方案，对我来说效果很好。我的配置如下所示：

proxy: {
  "/api/*": {
    target: "http://localhost:8080"
  }
}

此配置确保所有以“/api”开头的请求都发送到后端 API 服务器（在本例中运行在 localhost:8080 上），而不是 dev-server。或者，如果需要，您可以使用函数绕过代理，如下所示：

proxy: {
  "/api/*": {
    target: "http://localhost:8080",
    bypass(req, res) {
      return (/* some condition */) ? '/index.html' : false;
    }
  }
}

但我从来不需要使用它，因为我只需要“/api/*”键来确保每个请求都发送到正确的服务器。

重要的是，您应该让两台服务器在不同的端口上运行。我的后端通常使用 8080，开发服务器使用 9090。

【讨论】：