当我们开发需要使用后端持久化数据的 Angular 应用程序时，后端通常在 localhost 的另一个端口上提供服务。例如，前端 Angular 应用程序的 URL 是 http://localhost:4200，而后端服务器的 URL 是 http://localhost:3000。在这种情况下，如果我们从前端应用程序向后端服务器发出 HTTP 请求，它将是一个跨域请求，我们需要进行一些额外的工作才能实现它。有两种解决方案。我们可以使用 CORS 或服务器端代理。在本文中，我将讨论服务器端代理方法。

Angular CLI 使用 webpack-dev-server 作为开发服务器。webpack-dev-server 使用强大的 http-proxy-middleware 包，使我们可以在拥有单独的 API 后端开发服务器时在同一域上发送 API 请求。

例如，我们在 API 后端上有以下 API 端点：

GET http://localhost:3000/api/books

在使用 webpack-dev-server 的服务器端代理之后，如果我们的 Angular 应用程序在端口 4200 上提供服务，我们可以通过以下 URL 发送 HTTP 请求以到达相同的 API 端点：

GET http://localhost:4200/api/books

在未弹出的 Angular CLI 应用程序上启用服务器端代理

步骤 1：

在项目的 package.json 旁边创建一个名为 proxy.conf.json 的文件。

步骤 2：

将以下内容添加到新创建的 proxy.conf.json 文件中：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

步骤 3：

将 package.json 文件的启动脚本修改为：

"start": "ng serve --proxy-config proxy.conf.json"

步骤 4：

重新启动 npm start 进程以使我们的更改生效。

在已弹出的 Angular CLI 应用程序上启用服务器端代理

步骤 1：打开 webpack.config.js 文件并定位 devServer 部分：

步骤 2：将 devServer 部分替换为以下内容：

devServer: {
  proxy: {
    "/api": {
      target: "http://localhost:3000",
      secure: false
    }
  }
}

本文介绍了在 Angular CLI 和 webpack-dev-server 中配置服务器端代理的基本方法。