angular http请求路径IP地址重复

现象描述

写了一个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。

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 227,572评论 6 531
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 98,071评论 3 414
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 175,409评论 0 373
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 62,569评论 1 307
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,360评论 6 404
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 54,895评论 1 321
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,979评论 3 440
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,123评论 0 286
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,643评论 1 333
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,559评论 3 354
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,742评论 1 369
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,250评论 5 356
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,981评论 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,363评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,622评论 1 280
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,354评论 3 390
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,707评论 2 370

推荐阅读更多精彩内容