用nginx解决 前端js下载跨域问题

用nginx解决 前端js下载跨域问题

背景

订单系统增加附件 预览 , 下载的功能,但是这个附件是客户推单时推送过来的,文件连接是类似oss连接,但是是客户的域名,所以导致跨域问题.

前端是vue项目

解决过程

1.面向百度编程

先百度了一番

基本都是说用 blob 这个我真不太了解,但是在项目里找到了别人写的下载方法,也是用的blob,但是根本解决不了跨域问题.

于是我找了几个字多的,试了一下,根本没用

2.摆烂

百度一番没找到解决办法,于是打算摆烂

附件预览界面大约长这样子,直接鼠标在链接上面右键另存为可以下载附件

于是改造了一下原来的下载方法 增加个友好提示

javascript 复制代码
    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("下载失败,请尝试在链接上使用右键另存为");
      }
      xhr.send();
    }

3.重新出发

增加友好提示以后,同事都要被我笑死了,这种方式简直low爆了

于是我想到用nginx反向代理来解决这个问题

继续百度

在csdn上找到一篇 地址

用本地nginx试了一下

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

修改下载方法

javascript 复制代码
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("直接下载失败,请尝试在链接上使用右键另存为");
      }
      xhr.send();
}

居然成功了,可以下载文件, 于是修改了一下 上测试服务器

最终版js

javascript 复制代码
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("直接下载失败,请尝试在链接上使用右键另存为");
      }
      xhr.send();
}

4.新问题

上测试服务器后发现按下载按钮还是失败,发现居然报502

翻了一下nginx的报错日志

shell 复制代码
no resolver defined to resolve ........

百度了一下

原来nginx代理的地址如果是域名的话 需要增加dns解析 nginx并不会直接用系统的dns

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

设置完 resolver 后 再试 果然成功了

相关推荐
今天头发还在吗4 分钟前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
渣哥12 分钟前
从 AOP 到代理:Spring 事务注解是如何生效的?
前端·javascript·面试
toobeloong27 分钟前
Electron 从低版本升级到高版本 - 开始使用@electron/remote的改造教程
前端·javascript·electron
悠哉摸鱼大王30 分钟前
前端获取设备视频流踩坑实录
前端·javascript
铅笔侠_小龙虾39 分钟前
深入理解 Vue.js 原理
前端·javascript·vue.js
你的眼睛會笑1 小时前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
无光末阳1 小时前
vue 环境下多个定时器的创建与暂停的统一封装
前端·vue.js
Hilaku1 小时前
技术Leader的“第一性原理”:我是如何做技术决策的?
前端·javascript·面试
慧一居士2 小时前
src/App.vue 和 public/index.html 关系和区别
前端·vue.js