快捷導(dǎo)航

使用nginx解決前端js下載跨域問題

更新時(shí)間：2023年10月24日 08:58:50 作者：只因黑子劉老六

訂單系統(tǒng)增加附件預(yù)覽,下載的功能,但是這個(gè)附件是客戶推單時(shí)推送過來的,文件連接是類似oss連接,但是是客戶的域名,所以導(dǎo)致跨域問題,本文小編將給大家介紹如何用nginx解決前端js下載跨域問題,需要的朋友可以參考下

背景

訂單系統(tǒng)增加附件預(yù)覽 , 下載的功能,但是這個(gè)附件是客戶推單時(shí)推送過來的,文件連接是類似oss連接,但是是客戶的域名,所以導(dǎo)致跨域問題.

前端是vue項(xiàng)目

解決過程

1.面向百度編程

先百度了一番

基本都是說用 blob 這個(gè)我真不太了解,但是在項(xiàng)目里找到了別人寫的下載方法,也是用的blob,但是根本解決不了跨域問題.

2.擺爛

百度一番沒找到解決辦法,于是打算擺爛

附件預(yù)覽界面大約長(zhǎng)這樣子,直接鼠標(biāo)在鏈接上面右鍵另存為可以下載附件

于是改造了一下原來的下載方法增加個(gè)友好提示

    downloadFile(url) {
      const fileName = this.getFilenameFromUrl(url); // 文件名
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      const _this = this
      xhr.onload = function () {
        if (this.status === 200) {
          const blob = new Blob([this.response], {type: 'application/octet-stream'});
          const link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      };
      // 增加友好提示 下載失敗讓用戶右鍵另存為
      xhr.onerror = function (){
        _this.$modal.msgError("下載失敗,請(qǐng)嘗試在鏈接上使用右鍵另存為");
      }
      xhr.send();
    }

3.重新出發(fā)

增加友好提示以后,同事都要被我笑死了,這種方式簡(jiǎn)直low爆了

于是我想到用nginx反向代理來解決這個(gè)問題

繼續(xù)百度

找到一篇地址

用本地nginx試了一下

location /download {
      if ($query_string ~*  ^(.*)url=(.*)$){
            set $imageUrl $2;
            proxy_pass $imageUrl;
      }
}

修改下載方法

downloadFile(url) {
      const fileName = this.getFilenameFromUrl(url); // 文件名
      const xhr = new XMLHttpRequest();
      const newUrl = 'http://localhost/download?url=' + url
      xhr.open('GET', newUrl, true);
      xhr.responseType = 'blob';
      const _this = this
      xhr.onload = function () {
        if (this.status === 200) {
          const blob = new Blob([this.response], {type: 'application/octet-stream'});
          const link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      };
      xhr.onerror = function (){
        _this.$modal.msgError("直接下載失敗,請(qǐng)嘗試在鏈接上使用右鍵另存為");
      }
      xhr.send();
}

居然成功了,可以下載文件, 于是修改了一下上測(cè)試服務(wù)器
最終版js

downloadFile(url) {
      const fileName = this.getFilenameFromUrl(url); // 文件名
      const xhr = new XMLHttpRequest();
      const newUrl = window.location.protocol + '//' + window.location.hostname + '/download?url=' + url
      xhr.open('GET', newUrl, true);
      xhr.responseType = 'blob';
      const _this = this
      xhr.onload = function () {
        if (this.status === 200) {
          const blob = new Blob([this.response], {type: 'application/octet-stream'});
          const link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      };
      xhr.onerror = function (){
        _this.$modal.msgError("直接下載失敗,請(qǐng)嘗試在鏈接上使用右鍵另存為");
      }
      xhr.send();
}

4.新問題

上測(cè)試服務(wù)器后發(fā)現(xiàn)按下載按鈕還是失敗,發(fā)現(xiàn)居然報(bào)502

翻了一下nginx的報(bào)錯(cuò)日志

no resolver defined to resolve ........

百度了一下

原來nginx代理的地址如果是域名的話需要增加dns解析 nginx并不會(huì)直接用系統(tǒng)的dns

location /download {
        resolver 你的dns;
        if ($query_string ~*  ^(.*)url=(.*)$){
                set $imageUrl $2;
                proxy_pass $imageUrl;
        }
}

設(shè)置完 resolver 后再試果然成功了

以上就是使用nginx解決前端js下載跨域問題的詳細(xì)內(nèi)容，更多關(guān)于nginx解決js下載跨域的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: