angular2中proxy的使用（问题解决）[HPM] Error occurred while trying to proxy request 的一种情况

        最近在学习angular2框架，感叹angular出现的bug解决起来有点难（bushi），主要是国内使用angular较少，百度不出来，Google的话倒是能给点提示，但是英文看着很不舒服。这段纯属吐槽。接下来是我今天上午遇到的问题和解决方法。

        之前成功的使用nginx反向代理实现了浏览器跨域访问。但是本地重新启动一个nginx服务来解决跨域问题显然并不是最优解。

        于是今天尝试使用angular/cli中自带的webpack.proxy.server进行proxy反向代理来解决浏览器跨域问题。

根据网上的文章，配置流程大概是：

        1.创建proxy.config.json，配置要跨域访问的接口

{
  "/api-81": {
    "target": "http://81.70.233.131:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api-81": ""
    }
  },
  "/api-163": {
    "target": "https://c.m.163.com",
    "logLevel": "debug",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
      "^/api-163": ""
    }
  }
}

        2.在angular.json 中添加项

"proxyConfig": "proxy.config.json"

        3.在package.json 中做如下修改

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

         4.通过如下地址访问并重启项目

       [HPM] Error occurred while trying to proxy request 错误

         整个流程配置结束之后发现，浏览器端可以正常运行，但是并没有Console.log任何信息。观察控制台，报如下错误。 

[HPM] Error occurred while trying to proxy request 
/ug/api/wuhan/app/data/list-total from localhost:4200 to
 https://c.m.163.com (ETIMEDOUT) 
(https://nodejs.org/api/errors.html#errors_common_system_errors)

[HPM] Error occurred while trying to proxy request
 /api-81/getTeacherList from localhost:4200 to 
http://81.70.233.131:3005 (ECONNRESET) 
(https://nodejs.org/api/errors.html#errors_common_system_errors)

        这里是webpack.proxy.server抛出的错误，我们可以从node_modules中找出这个服务器配置代码并做一点修改，来抛出更加详细的错误以便于我们解决问题。

        webpack.proxy.server 在/node_modules/http-proxy-middleware/lib/index.js，找到其中关于错误抛出的代码，将详细错误抛出。

//node_modules/http-proxy-middeleware/lib/index.js  错误函数
...
  function logError(err, req, res) {
    var hostname =
      (req.headers && req.headers.host) || (req.hostname || req.host) // (websocket) || (node0.10 || node 4/5)
    var target = proxyOptions.target.host || proxyOptions.target
    var errorMessage =
      '[HPM] Error occurred while trying to proxy request %s from %s to %s (%s) (%s)'
    var errReference =
      'https://nodejs.org/api/errors.html#errors_common_system_errors' // link to Node Common Systems Errors page
    logger.error("---------> 打印详细错误代码<---------") //添加的代码
    logger.error(err)        //添加的代码
    logger.error(
      errorMessage,
      req.url,
      hostname,
      target,
      err.code || err,
      errReference
    )
  }
}
....

 修改之后，报错信息为：

        socket hang up，顾名思义，socket连接断开。这个错误是nodejs也就是proxy.server抛出的。说明和后台连接不成功（超时）。出现这种情况有一种可能是因为后台服务器设置的断开时间较短，而数据又较大。

        而在这里，数据包并不大，且多个连接均超时。说明本地存在问题。而连接超时很大一部分问题出在网络质量上。

        我的网络连接的是公司的内网，对外网的访问有限制。因此nginx和这里的反向代理服务器都无法私自访问外网。这也是本错误的最终原因。

最终原因：

        内网导致反向代理服务器无法连接对应接口，时间达到后抛出超时的错误。

解决方法：

        更换网络连接。我这里直接换成个人热点，问题马上解决。

返回的结果

         思考：在nginx尝试反向代理的时候曾经遇到的这个内网限制的问题，所以这次只用了一个上午查找（bushi）。在进行网络相关的测试的时候，除了配置项以外，也要注意本地网络连接的影响。重要的是锁定问题出现的位置，体现在代码上就是根据抛出错误提示来思考和改正。