如何配置Angular-CLI将请求代理到指定路径？

我来帮你搞定这个代理配置的问题！其实这种保留路径前缀的代理配置很简单，只是网上很多示例只讲了根路径代理的情况，我之前也踩过类似的坑，现在给你一步步说明怎么配置：

步骤1：创建代理配置文件 #

在你的Angular项目根目录下，新建一个名为proxy.conf.json的文件，写入以下内容：

{
  "/portal/**": {
    "target": "http://my.host",
    "secure": false,
    "changeOrigin": true
  }
}

配置字段说明： #

• "/portal/**"：用来匹配所有以/portal开头的请求，比如/portal/api/v1/customer/13这类请求都会被代理规则捕获
• "target": "http://my.host"：指定请求要转发到的目标服务器地址
• "secure": false：如果目标服务器是HTTP协议（或者HTTPS证书不被本地信任），设置为false可以避免证书校验错误；如果是合法的HTTPS服务，你可以去掉这个字段或者设为true
• "changeOrigin": true：这个很关键！当目标服务器有主机头校验时，开启它会修改请求的Host头为目标服务器的地址，避免出现403或其他跨域相关的错误

步骤2：修改启动脚本 #

打开项目根目录的package.json文件，找到scripts里的start命令，加上--proxy-config参数指定我们刚才创建的配置文件：

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json",
  // 其他脚本（如build、test等）保持不变
}

步骤3：重启开发服务 #

关掉当前运行的ng serve，重新执行npm start（或者直接运行ng serve --proxy-config proxy.conf.json）。现在所有发往/portal/开头的请求，都会自动转发到http://my.host/portal/对应的路径啦！比如你请求localhost:4200/portal/api/v1/customer/13，实际会被转发到http://my.host/portal/api/v1/customer/13，完全符合你的需求~

额外说明（如果目标地址已包含/portal前缀） #

要是你的目标服务器地址本身就带/portal（比如http://my.host/portal），那就要用pathRewrite去掉请求路径里的/portal前缀，配置会变成这样：

{
  "/portal/**": {
    "target": "http://my.host/portal",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {"^/portal": ""}
  }
}

这样请求/portal/api/v1/customer/13同样会被转发到http://my.host/portal/api/v1/customer/13，效果和之前一致。

内容的提问来源于stack exchange，提问作者Andrei Ivascu