2017-08-17 30 views
0

在我的应用程序中,我目前使用的是角1.6。我想让文件下载,实际上我成功了。这里有一些代码:为什么角度文件下载使2请求获得2个不同的响应?

object.downloadFileByOwner = function (ownerId) { 
     return $http({ 
      method: "POST", 
      url: urlPrefix + "/file/download/by-owner?candidateId=" + candidateId + "&ownerId=" + ownerId, 
      headers: headers, 
      responseType: 'arraybuffer' 
     }).then(function (response) { 
      let headers = response.headers; 
      headers = headers(); 

      let filename = headers['filename']; 
      let contentType = headers['content-type']; 
      let contentDis = headers['content-disposition']; 

      let linkElement = document.createElement('a'); 
      try { 
       let blob = new Blob([response.data], { type: contentType }); 
       let url = window.URL.createObjectURL(blob); 

       linkElement.setAttribute('href', url); 
       linkElement.setAttribute("download", filename); 

       let clickEvent = new MouseEvent("click", { 
        "view": window, 
        "bubbles": true, 
        "cancelable": false 
       }); 
       linkElement.dispatchEvent(clickEvent); 
      } catch (ex) { 
       console.log(ex); 
      } 
     }); 
    }; 

这是我的角度服务的下载功能。但当点击文件名下载它时,浏览器发出2个请求并得到2个不同的响应。 1.响应不包含文件名,但2.其中一个获取文件名。你可以在这里找到浏览器截图。 all images 我想从头文件获取文件名,但正如您可以在下载函数中看到变量文件名一样,文件名未定义。谢谢你的帮助。

+3

它的CORS,浏览器请求检查你的服务器是否允许跨源请求,这就是为什么第一种方法是选项 –

+0

那么为什么我不能从头文件获取文件名?其实它是在标题。 – Caner

+0

你正在使用哪种服务器端语言? –

回答

0

选项是preflight request不是实际的请求。

此方法允许客户端确定与资源相关的选项和/或要求或服务器的功能,而不会暗示资源操作或启动资源检索。

CORS预检请求是一个CORS请求,用于检查是否理解CORS协议。

这是一个OPTIONS请求,它使用两个HTTP请求头:访问控制请求方法和访问控制请求头以及Origin头。

预检请求在需要时由浏览器自动发出;在正常情况下,前端开发人员不需要自己制作这些请求。

参考MDN

0

@Sibi拉吉和@Gaurav塔瓦是问题是2个不同的请求的右约1。一部分。为什么我无法从头文件获取文件名的原因是,我的服务器和clint端在不同的域。所以我必须将"Access-Control-Expose-Headers"添加到服务器对我的响应中。