title: AngularJS + Web API - How to securely download an excel file without having to log in again
body: <p>I have an application built with AngularJS and .NET Web API that uses Http Basic Authentication for security. They're on different subdomains eg: mydomain.com &amp; api.mydomain.com</p>
  
  <p>I have a secure url on the web api '<a href="https://api.mydomain.com/downloadFile" rel="nofollow">https://api.mydomain.com/downloadFile</a>' that generates an excel file that I need to download on the client. I tried getting the file to download through angularjs using HTML5 Blob objects but kept getting 'File corrupt' error messages when the file tried to open.</p>
  
  <p>The solution I came up with was to create a hidden iframe for downloading the file</p>
  
  <pre><code>&lt;iframe style="display:none;" ng-src="{{downloadFileUrl}}"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>And setting $scope.downloadFileUrl in the controller</p>
  
  <pre><code>$scope.downloadFile = function () {
      $scope.downloadFileUrl = $sce.trustAsResourceUrl('https://api.mydomain.com/downloadFile');
  };
  </code></pre>
  
  <p>This works but I'm forced to log in to the api again because the HTTP 'Authorization' header isn't being sent as part of the request from the iframe. Is there a way to pass the 'Authorization' header with the request from the iframe or any other way to securely download a file from the server without having to log in again?</p>