背景: 最近在寫一個介面的時候,需求是這樣的,上傳excel,匹配項目有多少個欄位匹配上了,如果匹配上了在單元格上標註綠色背景,然後返回excel文件和匹配的詳細。 首先這個excel文件,後端是不會去保存的,所以無法直接返迴文件鏈接,然後需要返回一個json,告訴前端有多少行是匹配上了的,中匹配多 ...
背景:
最近在寫一個介面的時候,需求是這樣的,上傳excel,匹配項目有多少個欄位匹配上了,如果匹配上了在單元格上標註綠色背景,然後返回excel文件和匹配的詳細。
首先這個excel文件,後端是不會去保存的,所以無法直接返迴文件鏈接,然後需要返回一個json,告訴前端有多少行是匹配上了的,中匹配多少個,高匹配多少個,總多少個等信息
想法:
因為我們項目上有別的同事寫好的工具類,傳入workbook對象返迴文件流給前端,文件返回搞定了,json怎麼樣返回給前端呢,我靈機妙用,既然content-type為文件流,Responebody被占用了,那我就增加一個header,讓前端去拿這個header,介面吭哧吭哧寫好了,自測postman也沒有問題。OK提交代碼了
問題:
前端死活都拿不到header的值,我還說,肯定是你的問題,postman、控制台網路都可以看到,為什麼你取不到,肯定是你的問題。然後前端苦苦換方法嘗試,都沒有效果,沒辦法了,我自己寫了個原生xhr去發生請求,發現,真取不到啊,奇怪得很。
問題原因:
然後我查閱資料,發現還真是我自己的問題,header上的設置,Access-Control-Expose-Headers
看名字就知道這個的作用,有空真的要再去看看http請求基礎知識啊!
Access-Control-Expose-Headers 是一個CORS(跨源資源共用)頭部,用於在瀏覽器端控制哪些響應頭部信息可以被JavaScript代碼訪問。它指定了在跨源請求中,響應的哪些頭部信息可以被客戶端JavaScript代碼訪問。預設情況下,瀏覽器只允許訪問一些簡單的響應頭部信息,例如
Cache-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
、Pragma
。這些頭部信息可以被JavaScript代碼直接訪問,而不需要額外的配置
問題解決:
我直接設置可以訪問,不想全部設置的可以指定header名字,多個逗號分隔
response.setHeader("Access-Control-Expose-Headers", "*");