下载报错，原因是http://是双斜线而非单斜线

今天遇到了个很坑的问题，情景是，当用户点击下载按钮时，会跳转到404页面，确实下载的url是不对的。

后端接口会响应下载的url给前端：

response.put("src", prefix+ "/src?url=" + uuid);

关键在于prefix，我配成了http:/ip:port/xxx的形式，传递给前端后，前端代码如下：

this.$http
        .post("/xxx", datas)
        .then(response => {
          response = response.data;
          if (response.status === 2000) {
            window.location.href = response.data.src
          }
        }

前端是通过href跳转，没有识别到http://，然后在我返回的url前添加http://ip:port（这个ip:port不知是从哪个环节获取的），

然后跳转链接的内容就变成了http://ip:port/ip:port/xxx/yyy这个怪样子，下载自然总是404了。

解决：把http:/ip:port/xxx改成http://ip:port/xxx即可，也就是改成双斜线。

 

下面是详细摸索过程：弄了整整两小时，最后竟然是粗心问题，无语了。但也并非全无收获：首先，有动力为此写一篇记录；其次，对下载这个环节的各个步骤有了更深的认识。

为啥花了这么久？排错试了各种方向吧。

1 试本地代码，部署后能正常下载。但是本地配的是双斜线和localhost。因为localhost表示客户端，所以部署到服务器的地址不能是localhost，应该是客户端直接访问到的地址。于是还是得测服务器。

2 是代码逻辑问题吗？加了各种打印信息语句（菜鸡还不会服务器远程调试）。测试发现返回给前端的url看起来是对的（其实http:后少了条斜线），不明白问题在哪。同时，对照查看浏览器network里的接口请求和响应信息。

3 尝试部署旧版后端代码，失败，因此排除新版代码逻辑问题。失败原因事后看是，配置文件配的prefix地址不对。

4 是否是前端代码不对？前端代码最近确实更新过。差点就要去找前端小姐姐对峙了，但为防打脸，还是得先做好功课。搜了下，vue确实有一些url自动加ip的情况。于是按照搜到的解决方法，在response.data.src前手动加上“http://ip:port”，还是不行（具体表现是怎样的忘记了）。

5 最后，（好像是）重新看了看我返回给前端的url（前述的步骤2里），终于发现我http:后是单斜线，溯源就是配置文件里配成了单斜线。

好吧，完结撒花。