Access denied CORs request in IE10+ in angularjs w

2019-03-05 23:10发布

问题:

I thought the days of cross browser support were a thing of the past with the various libraries out there insulating from some of the nuance and the purported standardisation of web browsers but....

I am trying to perform a $http get request using angularjs (v1.2.27) thus:

       $http({
            url: vm.hostName + '/pdf/' + id,
            method : 'GET',
            responseType : 'arraybuffer',
            cache : false})
            .success(function (response) {

                var file = new Blob([response], { type: 'application/pdf' });

                var fileURL = URL.createObjectURL(file);
                console.log(fileURL);
                console.log(response.data);
                window.open(fileURL);
      });

which works swimmingly on Chrome, FF and Safari (Mac and Win 7, 8 so far), but not on IE10+, I get this:

SEC7118: XMLHttpRequest for https://[api.domain.com]/pdf/55abc12345613af7946e required Cross Origin Resource Sharing (CORS). Error: Access is denied. at Anonymous function (https://[domain.com]/site/scripts/scripts.js:289:6) at Anonymous function (https://[domain.com]/public/assets/js/angular/angular.js:7736:11) at wrappedCallback (https://[domain.com]/public/assets/js/angular/angular.js:11106:15) at wrappedCallback (https://[domain.com]/public/assets/js/angular/angular.js:11106:15) at Anonymous function (https://[domain.com]/public/assets/js/angular/angular.js:11192:11) at Scope.prototype.$eval (https://[domain.com]/public/assets/js/angular/angular.js:12181:9) at Scope.prototype.$digest (https://[domain.com]/public/assets/js/angular/angular.js:12010:15) at Scope.prototype.$apply (https://[domain.com]/public/assets/js/angular/angular.js:12285:13) at done (https://[domain.com]/public/assets/js/angular/angular.js:7994:34) at completeRequest (https://[domain.com]/public/assets/js/angular/angular.js:8196

The response headers returned by the api server are

Key Value
Response    HTTP/1.1 200 OK
Server  nginx/1.8.0
Date    Tue, 25 Aug 2015 13:40:45 GMT
Content-Type    application/pdf
Content-Length  86057
Connection  keep-alive
Access-Control-Allow-Methods    GET, PUT, POST, OPTIONS
Access-Control-Allow-Headers    Origin, Content-Type, Accept
Access-Control-Allow-Origin *
Content-Transfer-Encoding   binary

and if I look at the response body (in developer tools) I get a message that it can't be rendered (not unreasonably as it is a pdf), but a link to save the content is provided which when saved and opened shows the correct pdf.

The network response appears to show that the content is downloaded given the content-length.

I've looked at a number of CORs related posts but to no avail. The closest one SEC7118: XMLHttpRequest for /socket.io/1/?t=1370206038749 required Cross Origin Resource Sharing (CORS) doesn't help. The Microsoft blog http://blogs.msdn.com/b/ie/archive/2012/02/09/cors-for-xhr-in-ie10.aspx doesn't give any more clues either (I'm guessing it may have something to do with the 'arraybuffer' and binary data, but am now at a dead end and looking for further inspiration.

Anyone suggest anything else? ps. I am in control of the server api and it is being services by vert.x (v2.5) as a Java REST service.

Thanks

回答1:

The resolution posted StackOverflow answer sorted the problem. The issues wasn't with the response back from the server, the issue was with the opening of the url created by

var file = new Blob([response], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);

The IE doesn't support window.open of the generated blob:xxx-yyy url. See link answer for required javascript for displaying blobs in IE10+ (which was what I wanted).