angular2中proxy的使用(问题解决)[HPM] Error occurred while trying to proxy request 的一种情况
最近在学习angular2框架,感叹angular出现的bug解决起来有点难(bushi),主要是国内使用angular较少,百度不出来,Google的话倒是能给点提示,但是英文看着很不舒服。这段纯属吐槽。接下来是我今天上午遇到的问题和解决方法。之前成功的使用nginx反向代理实现了浏览器跨域访问。但是本地重新启动一个nginx服务来解决跨域问题显然并不是最优解。于是今天尝试使用angular/c
最近在学习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)。在进行网络相关的测试的时候,除了配置项以外,也要注意本地网络连接的影响。重要的是锁定问题出现的位置,体现在代码上就是根据抛出错误提示来思考和改正。
更多推荐
所有评论(0)