现象描述

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

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