Angular 配置api代理 proxy 实践

话不多说，直奔主题

:: 解决方案

:: 方式一 ::

• 第一步，在根目录或/src 下新建一个 proxy.conf.json 文件

  备注：这里不用纠结文件名称即xxx.xxx.json，只要使用时能找到，且正确配置文件内容格式即可

  {
    "/dev-list": {
      "target": "https://a.examples.com/dev",	// 代理地址
      "secure": true,	// 接口是否开启 https
      "changeOrigin": true	// 支持跨域
    },
    "/dev-info": {
      "target": "https://a.examples.com/dev",
      "secure": true,
      "changeOrigin": true
    },
    "/test-list": {
      "target": "http://b.examples.com/test",
      "secure": false,
      "changeOrigin": true,
      "logLevel": "debug"	// 代理日志
    },
    "/test-info": {
      "target": "http://b.examples.com/test",
      "secure": false,
      "changeOrigin": true,
      "logLevel": "debug"
    }
  }
  

• 第二步，在 angular.json 文件中找到 architect 下的 serve ，并在 serve 内的 options 选项内配置 proxyConfig，没有就依次创建对应选项参数，事例如下：

  ...
  {
    "architect": {
      ...
      "serve": {
        ...
        "options": {
          ...
          // 当前配置文件所做目录，相对于`angular.json`文件的位置，具体以实际配置位置为准
          "proxyConfig": "src/proxy.conf.json"	
        }
      }
    }
  }
  ...
  

• 第三步，重启项目，验证成果

  说明：这里的 npm run start 实际指向的也是 ng serve 启动方式，故不用配置 --proxy-config

  npm run start 
  ===OR===
  ng serve
  

:: 方式二 ::

• 第一步，在根目录或/src 下新建一个 proxy.conf.js 文件

  备注：这里不用纠结文件名称即xxx.xxx.js，只要使用时能找到，且正确配置文件内容格式即可

  const PROXY_CONFIG = [
  	{
      context: [
        "/dev-list",
        "/dev-info"
      ],
      "target": "https://a.examples.com/dev",
      "secure": true,
      "changeOrigin": true
    },
    {
    	context: [
    		"/test-list",
        "/test-info"
  		],
      "target": "http://b.examples.com/test",
      "secure": false,
      "changeOrigin": true,
      "logLevel": "debug"
    }
  ]
  
  module.exports = PROXY_CONFIG
  

• 第二步，在 angular.json 文件中找到 architect 下的 serve ，并在 serve 内的 options 选项内配置 proxyConfig，没有就依次创建对应选项参数，事例如下：

  ...
  {
    "architect": {
      ...
      "serve": {
        ...
        "options": {
          ...
          // 当前配置文件所做目录，相对于`angular.json`文件的位置，具体以实际配置位置为准
          "proxyConfig": "src/proxy.conf.js"	
        }
      }
    }
  }
  ...
  

• 第三步，重启项目，验证成果

  说明：这里的 npm run start 实际指向的也是 ng serve 启动方式，故不用配置 --proxy-config

  npm run start 
  ===OR===
  ng serve
  

:: 重要

如果环境中设置了 baseUrl ，那么需要将其内容置空，不然代理可能会失效，参考事例如下：

export const environment = {
	production: false,
	// baseUrl: 'http://examples.com'
	baseUrl: ''
	...
}

:: 总结

相对来讲，两种方式都可实现，具体差别也不大，但若是需要配置多个面向 target 的代理地址，且同时需要多个匹配规则时，推荐使用 方式二 proxy.conf.js 的方式

:: 衍伸阅读

代理到后端服务器

:: 更多内容 ::

> 开发过程中踩坑经验记录