Better

Angular 借助 webpack-dev-server 来本地开启服务，可以通过 proxy 设置代理，由于 Angular-cli 对 webpack 进行的封装，会稍微有些自己的特色。

基本步骤

你可以通过 json 文件或 js 文件来进行 proxy 设置，由于我需要添加 header 字段，因此直接通过 js 文件来导出配置，具体步骤

1. 项目根目录下创建 proxy.conf.js 配置文件
2. 告知 angular-cli 使用该配置，angular.json 下 serve options 中添加 proxyConfig 字段，值为配置文件路径
3. 修改配置，需要重启 ng serve

核心配置与常见需求

里面演示常用配置及字段含义

module.exports = {
  '/api': {
    target: 'your_website_url',
    secure: false,
    pathRewrite: {
      '^/api': ''
    },
    changeOrigin: true,
    headers: {
      authorization: 'Basic eGtvb2w6eGtvb2xAZHN4bHM='
    },
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf('html') !== -1) {
        console.log('Skipping proxy for browser request.');
        return '/index.html';
      }
      req.headers['authorization'] = 'Basic eGtvb2w6eGtvb2xAZHN4bHM=';
    }
    logLevel: 'debug'
  }
};

常见需求

• 重写 URL 路径：通过 pathRewrite 字段可以在运行时重写 URL 路径，比如上面的例子，假设 api 是我们只是前端的一个标识，后端是不需要的，因为需要将 api 去掉，就按照上述方式使用即可。
• 如果访问的后端不在 localhost 上，需要设置 changeOrigin 选项为 true
• 想知道代理是否如预期般工作，可以开启 logLevel，比如设置为 debug
• 如果你需要验证 ssl 证书，设置 secure 为 true，本地测试通常都不需要

代理多个条目

如果你需要将多个路径代理到同一个服务，可以通过 context 配置实现，但此时你需要返回数据格式

module.exports = [
    {
        context: [
            "/api",
            "/api2"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]

动态配置每个请求

如果你需要根据情况绕过此代理，或在发出请求前先动态修改一下，可以添加 bypass 选项。

假设如下情形，你的请求不具有特别的标识，根目录下所有请求均需要，这就会有个问题，对于浏览器发出的请求，也就是请求 html 的时候，我们肯定是不能使用代理的，需要进行跳过，按照如下配置即可

有时候我们的服务可能添加了认证，我们可能需要对每个请求添加 custom header，比如 authorization，上面的例子也例举出来了。

注意事项

自己在实践的过程中，由于自己粗心，没注意 environment 下 apiUrl 的配置，之前的项目并未使用代理，而是直接请求 nginx 代理服务器，一开始并未进行修改，导致一直不生效。

注意点：webpack-dev-server 肯定只能拦截自己服务的请求，因此 apiUrl 不能是其他服务地址！

扩展

webpack-dev-server 中 proxy 依赖的 http-proxy-middleware 包，简单测试了一下，其自身的配置在 angular 中也是直接生效的。比如修改 request header 也可以通过 onProxyReq 配置实现

angular-cli 提供的 bypass 配置倒是没有找到，不知道是不是 angular-cli 扩展的

更多配置可以参考 http-proxy-middleware options