现象描述
写了一个 angular 项目,测试多次都没问题,就要打包部署到云端服务器去,部署完成之后,打开页面访问,部分数据资源都查不到结果,之后返回预设的访问未经授权地址的报错信息。
我都用 admin 账号了,自然所有后台接口都应该是畅快访问的,为什么会权限问题呢?一个简单的 get 请求,没多少严苛要求啊,不用想,是不是路径错了,打开控制台,果然,请求地址里面,有两个 IP 地址,类似下图:
虽然一开始我想直接开始甩锅,毕竟本地测试那么久都没问题,现在部署上去,怎么会突然出现问题呢?但是这个是请求地址有误啊,莫名奇妙两个 IP,怎么看都是前端的问题。我就想说用域名啊,可惜说域名不稳定,经常 ping 不同,后续再解决。
我们几个人就看了很久,能想到请求相关的就请求数据的 service、http 拦截器等等地方,看起来都很正常。IP 地址出现的文件就一个,就两行,地址看起来也正确,过网关什么的 path 也有加。到底哪里出的问题?
因为咋看之下,只是请求的 IP 地址重复了,还不一定把锅甩给谁,虽然知道是大概率是自己的,但是还是去排查看看是不是部署的容器问题了、静态资源服务器配置的问题了等等。
其实这类问题有个查锅最快的方式,就是抓包,哪里有问题一眼就出来,不出所料,请求在出去的时候,就已经 IP 重复了,根本不是后台的锅。
怎么办?静态资源部署到云端,后台也上云了,我本地运行没办法连后台(原因不想说),居然就在控制台又美化压缩后的 js,找个有拦截到请求随意地点,跳到请求处理相关的地方。从结果上来看,从 http 请求创建,到透过拦截器发出,看起来都是正常的,但一些更多的事件回调之类的地方就看不到了。
一度有点兴奋。
愚蠢的细节错误
那么问题出在了哪里呢?
再看看这片段几个人看了无数次的地方,就类似:
虽然单独截图出来了,还有放大,可以一眼就看到了。但是编辑器小小又多的内容,几个人看了好多次,都没曾想到会是这里的问题。
http 请求后面的左斜线少了一个。
就是这么一个小小的问题。这是我才想起来,上云前有改动的唯一地方,就是修改了 IP 地址,可能就是那个时候 ctrl c ctrl v 的时候,不小心多划了一个。
可笑是可笑,问题是解决了,但是为什么呢?常识性分析就是因为只有一个/,angular 应用就把这个/IP 当成了一个普通 path,解析 url 发现有协议,有端口,有路径,但是没有 host,就自动补入了应用所在的 host。
实际测试也是这个效果
这个省略冒号两个斜杠:
请求是这样:
都不知道是个什么东西。
省略一个斜杠或者两个斜杠:
当然,正常写法,正常结果
(千万不要问我 80 端口怎么没显示……)
这就是 angular 的“周全”之处,它可能认为你是故意这样写的,就会按照一定的规则,帮你重塑正是的请求。看起来它把输入的 url 字符串按照一定规则进行截取,第一个冒号前的,算是协议,有/分割的当成了 path 路径,处理完之后没有找到 ip,就抓取当前应用所在的网域当成请求 IP。
那么正常的,就是// 之后的就是 IP 了。事实上,url 中,“http://”这整个部分,才是 protocol,而不仅仅只是“http”几个字符就是协议了。
但是,有些时候,url 字符串写错了,是能够直接报错的,例如这样的:
这个 console.log(err)就如下:
到这里就不多说了,现在开发,随着 IDE、框架之类的原来越成熟,可能在最开始的“ture”错误,才是最让人难以发现的错误,其实问题虽然解决了,虽然所有人都看过那份代码,都没看到少些了一个/,但是一想到这个,还是觉得十分羞愧。
以下不要看,纯浪费时间,只是留个新手印记
大概是讲想看看 angular 源码 HttpClient 是怎么处理这个 url 字串的,但是找半天都没有定位到真实的源代码位置,就又开始印象流瞎扯。)**
为什么会额外多加一个 IP 地址呢?
由于发生的是这样一个新手问题,我不清楚该怎么去查看资料,就只能笨笨地去看看 angular 相关 HttpClient 相关的源代码,企图想了解一下,这个请求在发起到发出之间做了什么事情。但是能力有限,我也不知道看得对不对,所以只能大概说说,我没说过一定是对的。
HttpClient 本来也就是 angular 提供的简化版 http 客户端 api,所以还是要看到 HttpRequest 类里面去了。
正如起注释中说:
这也是写 HttpInterceptor 会用到 clone 方法。
其实主要看到还是把请求里面的东西 url、请求方法等都单一处理了。主要就看 url 部分。
看到處理這個 url 部分,还是以传入的 url 操作的,那么这个 url 到底是什么样子呢?
大概是在$locationShim 这个类里面,有个 getServerBase 的方法
也是在这文件里面从
开始,就有说从 URL 中获取 protocol、host、port、path 等操作,注释中有示例。
其中关于 path 是有说:
从这一系列看起来,然后在多翻了几层之后,大概就是想的那样,把输入的 url 字符串按照一定规则进行截取,第一个冒号前的,算是协议,有/分割的当成了 path 路径,处理完之后没有找到 ip,就抓取当前应用所在的网域当成请求 IP。
我还是不清楚为什么不直接报错呢?更重要的是,要学好基本功,不然像我这样,连个源码都看得浅尝辄止乱七八糟,是真的丢人。