现象描述

写了一个 angular 项目,测试多次都没问题,就要打包部署到云端服务器去,部署完成之后,打开页面访问,部分数据资源都查不到结果,之后返回预设的访问未经授权地址的报错信息。

我都用 admin 账号了,自然所有后台接口都应该是畅快访问的,为什么会权限问题呢?一个简单的 get 请求,没多少严苛要求啊,不用想,是不是路径错了,打开控制台,果然,请求地址里面,有两个 IP 地址,类似下图:

现象.png

虽然一开始我想直接开始甩锅,毕竟本地测试那么久都没问题,现在部署上去,怎么会突然出现问题呢?但是这个是请求地址有误啊,莫名奇妙两个 IP,怎么看都是前端的问题。我就想说用域名啊,可惜说域名不稳定,经常 ping 不同,后续再解决。

我们几个人就看了很久,能想到请求相关的就请求数据的 service、http 拦截器等等地方,看起来都很正常。IP 地址出现的文件就一个,就两行,地址看起来也正确,过网关什么的 path 也有加。到底哪里出的问题?

因为咋看之下,只是请求的 IP 地址重复了,还不一定把锅甩给谁,虽然知道是大概率是自己的,但是还是去排查看看是不是部署的容器问题了、静态资源服务器配置的问题了等等。

其实这类问题有个查锅最快的方式,就是抓包,哪里有问题一眼就出来,不出所料,请求在出去的时候,就已经 IP 重复了,根本不是后台的锅。

怎么办?静态资源部署到云端,后台也上云了,我本地运行没办法连后台(原因不想说),居然就在控制台又美化压缩后的 js,找个有拦截到请求随意地点,跳到请求处理相关的地方。从结果上来看,从 http 请求创建,到透过拦截器发出,看起来都是正常的,但一些更多的事件回调之类的地方就看不到了。

一度有点兴奋。

愚蠢的细节错误

那么问题出在了哪里呢?

再看看这片段几个人看了无数次的地方,就类似:

问题的所在.png

虽然单独截图出来了,还有放大,可以一眼就看到了。但是编辑器小小又多的内容,几个人看了好多次,都没曾想到会是这里的问题。

http 请求后面的左斜线少了一个。

就是这么一个小小的问题。这是我才想起来,上云前有改动的唯一地方,就是修改了 IP 地址,可能就是那个时候 ctrl c ctrl v 的时候,不小心多划了一个。

可笑是可笑,问题是解决了,但是为什么呢?常识性分析就是因为只有一个/,angular 应用就把这个/IP 当成了一个普通 path,解析 url 发现有协议,有端口,有路径,但是没有 host,就自动补入了应用所在的 host。

实际测试也是这个效果

这个省略冒号两个斜杠:

省略冒号两个斜杠.png

请求是这样:

效果

都不知道是个什么东西。

省略一个斜杠或者两个斜杠:

省略一个斜杠或者两个斜杠.png

效果

当然,正常写法,正常结果

正常写法

(千万不要问我 80 端口怎么没显示……)

正常

这就是 angular 的“周全”之处,它可能认为你是故意这样写的,就会按照一定的规则,帮你重塑正是的请求。看起来它把输入的 url 字符串按照一定规则进行截取,第一个冒号前的,算是协议,有/分割的当成了 path 路径,处理完之后没有找到 ip,就抓取当前应用所在的网域当成请求 IP。

那么正常的,就是// 之后的就是 IP 了。事实上,url 中,“http://”这整个部分,才是 protocol,而不仅仅只是“http”几个字符就是协议了

但是,有些时候,url 字符串写错了,是能够直接报错的,例如这样的:

可查出的url错误

这个 console.log(err)就如下:

err

到这里就不多说了,现在开发,随着 IDE、框架之类的原来越成熟,可能在最开始的“ture”错误,才是最让人难以发现的错误,其实问题虽然解决了,虽然所有人都看过那份代码,都没看到少些了一个/,但是一想到这个,还是觉得十分羞愧。

以下不要看,纯浪费时间,只是留个新手印记

大概是讲想看看 angular 源码 HttpClient 是怎么处理这个 url 字串的,但是找半天都没有定位到真实的源代码位置,就又开始印象流瞎扯。)**

为什么会额外多加一个 IP 地址呢?

由于发生的是这样一个新手问题,我不清楚该怎么去查看资料,就只能笨笨地去看看 angular 相关 HttpClient 相关的源代码,企图想了解一下,这个请求在发起到发出之间做了什么事情。但是能力有限,我也不知道看得对不对,所以只能大概说说,我没说过一定是对的。

HttpClient 本来也就是 angular 提供的简化版 http 客户端 api,所以还是要看到 HttpRequest 类里面去了。

https://github.com/angular/angular/blob/1eebb7f1899d55a5d825241eae2eb3db12b3fea8/packages/common/http/src/request.ts#L78

正如起注释中说:

image.png

这也是写 HttpInterceptor 会用到 clone 方法。

其实主要看到还是把请求里面的东西 url、请求方法等都单一处理了。主要就看 url 部分。

image.png

https://github.com/angular/angular/blob/1eebb7f1899d55a5d825241eae2eb3db12b3fea8/packages/common/http/src/request.ts#L209

看到處理這個 url 部分,还是以传入的 url 操作的,那么这个 url 到底是什么样子呢?

大概是在$locationShim 这个类里面,有个 getServerBase 的方法

image.png

也是在这文件里面从

https://github.com/angular/angular/blob/1eebb7f1899d55a5d825241eae2eb3db12b3fea8/packages/common/upgrade/src/location_shim.ts#L444

开始,就有说从 URL 中获取 protocol、host、port、path 等操作,注释中有示例。

其中关于 path 是有说:

image.png

从这一系列看起来,然后在多翻了几层之后,大概就是想的那样,把输入的 url 字符串按照一定规则进行截取,第一个冒号前的,算是协议,有/分割的当成了 path 路径,处理完之后没有找到 ip,就抓取当前应用所在的网域当成请求 IP。

我还是不清楚为什么不直接报错呢?更重要的是,要学好基本功,不然像我这样,连个源码都看得浅尝辄止乱七八糟,是真的丢人。