[Angular] 使用Angular CLI配置代理

在前端与后端之间，存在一种需要在同一主机上但不同端口进行通信的配置的情况。例如

• フロントエンドが localhost:4200/

バックエンドが localhost:3000/

在Angular中，通常会出现这种情况，导致CORS错误。但是，在Angular中，可以通过Angular CLI来准备代理配置文件来解决这个问题。

这篇文章是在什么环境下进行的？

• Windows10 Home 64bit

• node v8.2.1

• npm v4.0.5

• angular/cli v1.2.6

Angular v4.3.2

准备代理设置文件(proxy.conf.json)。

如果来自前端的请求是”/app”，将会被转发到后端的”localhost:3000″。

{
  "/app": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/app": ""}
  }
}

编辑 package.json 文件

一旦准备好代理设置文件后，在package.json中的”scripts”元素中添加以该文件启动应用程序的配置。
具体来说，将以下”start”的内容添加到package.json的”scripts”元素中。

{
  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
  }
}

应用程序启动后，应用代理设置已生效。

完成前述的设置后，通过执行以下命令可以启动应用程序并反映代理设置。

// プロキシ設定を反映させる場合
$ npm run start

如果不想应用代理设置,

如果不想应用代理设置，则可以直接使用 ng serve 启动应用程序。

// プロキシ設定を反映させたくない場合
$ ng serve

请提供一些关于以下内容的参考资料。

• Proxy To Backend

webpack dev server#proxy