問題描述
在開發(fā)前后端分離項目中出現(xiàn)后端設(shè)置響應(yīng)頭，前端一直無法獲取等問題。
后端設(shè)置響應(yīng)頭代碼如下
response.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(fileName,"UTF-8"));
在瀏覽器中我們是可以看到設(shè)置的響應(yīng)頭Content-Disposition屬性，但是在前端接收到的響應(yīng)信息中卻看不到我們設(shè)置的Content-Disposition屬性。
問題解決
原來在前后端分離的項目中除了需要定義響應(yīng)頭之外還需要暴露響應(yīng)頭，這樣才能被前端獲取。默認(rèn)情況下，header只有六種響應(yīng)頭暴露給外部，如下：
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
除了這六種之外，要想暴露其他響應(yīng)頭需要通過Access-Control-Expose-Headers來設(shè)置，具體代碼如下
response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");
response.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(fileName,"UTF-8"));
設(shè)置成功之后可以看到如下圖所示
此時，返回給前端的響應(yīng)信息可以看到我們后端設(shè)置的響應(yīng)頭了
另外，我在后端設(shè)置為Content-Disposition，在前端我通過如下方式一直獲取不到
let contentDisposition = res.headers['Content-Disposition'];
最后發(fā)現(xiàn)瀏覽器自動將大寫Content-Disposition轉(zhuǎn)成了小寫content-disposition
改下即可成功獲取。文章來源：http://www.zghlxwxcb.cn/news/detail-762458.html
let contentDisposition = res.headers['content-disposition'];
實現(xiàn)文件下載的前后端具體代碼請看這篇文章《vue+elementui實現(xiàn)文件打包下載》文章來源地址http://www.zghlxwxcb.cn/news/detail-762458.html
到了這里，關(guān)于解決前后端分離項目后端設(shè)置響應(yīng)頭前端無法獲取的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
