Angular.js + CORS + IE11 + invalid URL = "SCRIPT7002: XMLHttpRequest: Network Error 0x7b..."

This time something completely different. I just hope that in future this post might save 2 hours of debugging.

In Nokia I'm the creator of internal search engine (but I actually do this in my leisure time). Something like Google, but only for our intranet. As you may expect it would be an overkill to employ C++ in front-end. Therefore I used Angular.js to do the job. And it does it's job pretty well.

However, recently one user came to me with a complain that he cannot log in into the site. I requested a log from console and got following.

SCRIPT7002: XMLHttpRequest: Network Error 0x7b, The filename, directory name, or volume label syntax is incorrect.

File: *************

Error: Unable to connect to the target server.

   at Anonymous function (https://******/bower_components/angular/angular.min.js:80:237)
   at t (https://******/bower_components/angular/angular.min.js:76:22)
   at Anonymous function (https://******/bower_components/angular/angular.min.js:73:367)
   at J (https://******/bower_components/angular/angular.min.js:100:404)
   [...]

At first glance I thought that this is some kind of bug in IE11 related to missing Origin header in XHR requests (this header is needed if you use CORS (Cross-Origin Resource Sharing)). During debugging this it turned out that the problem is completely different. And quite kinky one.

In some front-end configuration I used following URL.

https:///******

Note that there are three forward slashes. Do you think that IE11 can handle that?

Apparently no. The worst thing is that this part of URL was not present in JavaScript console in the browser.

Removing one forward slash fixed the bug, but 2 hours were wasted anyway.