網絡圖片

使用umi-request a標簽下載同域鏈接時不帶Cookie的問題

今天Ant design Pro項目上遇到了這個問題，有個需求是后端提供下載鏈接，可以是提供用戶下載查看設備的配置文件。

按常規(guī)來說，一般的下載鏈接是不會做請求鑒權的，但是后端同事說這種配置文件算是隱私了，所以就要做鑒權請求，不提供鏈接復制到哪都能下載的情況，必須是登錄的用戶才能下載。

由于后端使用cookie-session模式做的鑒權，并且前端使用是的umi-request做http請求庫，使用<a href="url">下載</a>做鏈接下載發(fā)現請求頭沒有像其他請求一樣自動帶上cookie了，所以下載不了。

然后通過查資料，就寫了：

/** Request 網絡請求工具 更詳細的 api 文檔: https://github.com/umijs/umi-request */
import request from '@/utils/request';
... //其他代碼
const download = async (url) => {
    // url = "http://192.168.252.80:43002/v1/device/backup/subDeviceRelations.txt"
    const { data, response } = await request(url, {
      method: 'get',
      getResponse: true,
      responseType: 'blob',
    });
    if (response.ok) {
      var blob = data;
      var filename =  url.split('/').pop(); // 獲取鏈接最后一節(jié)當文件名 = "subDeviceRelations.txt"
      var a = document.createElement('a');
      //創(chuàng)鍵臨時url對象
      var url = URL.createObjectURL(blob);
      a.href = url;
      a.download = filename;
      a.click();
      //釋放之前創(chuàng)建的URL對象
      window.URL.revokeObjectURL(url);
    }

  }

  return (
    <span>
      {value ? <a
        key='download'
        href='#'
        onClick={() => {
          download(value);
        }}
      >
        下載
      </a> : <div>無</div>}
    </span>
  );
... //其他代碼

這種方法是可以解決的，但是有個問題，就是點擊下載后就必須等到接口請求完成后才有響應并且彈出瀏覽器（火狐）默認彈框，詢問是否保存的文件，這種弊端就是如果要下載一個超級大的文件，那就用戶點擊相當于沒有響應一樣，過了很久才能彈窗。

所以必須想辦法找新的解決方案，于是：

return (
    <span>
      {value ? <a
        key='download' // value = "http://192.168.252.80:43002/v1/device/backup/subDeviceRelations.txt"
        href={value.substring(value.indexOf(':43002/') + 6)} // href = "/v1/device/backup/subDeviceRelations.txt"
        download // 必須設置，要不然直接在瀏覽器上顯示文件內容了
      >
        下載
      </a> : <div>無</div>}
    </span>
  );

這樣href='/v1/device/backup/subDeviceRelations.txt'umi-repuest底層請求就會自動補充host和cookie了，解決了鑒權問題；還有也能夠按照瀏覽器標準的方式下載文件了，會自動添加顯示到瀏覽器的下載顯示轉態(tài)與進度那里。

參考文章

http://www.itdecent.cn/p/f087cdf57846
https://blog.csdn.net/wangjinju77777/article/details/119651652
https://blog.p2hp.com/archives/8105