使用nginx解决前端js下载跨域问题
更新时间：2023年10月24日 08:58:50 作者：只因黑子刘老六
订单系统增加附件预览,下载的功能,但是这个附件是客户推单时推送过来的,文件连接是类似oss连接,但是是客户的域名,所以导致跨域问题,本文小编将给大家介绍如何用nginx解决前端js下载跨域问题,需要的朋友可以参考下
背景
订单系统增加附件预览 , 下载的功能,但是这个附件是客户推单时推送过来的,文件连接是类似oss连接,但是是客户的域名,所以导致跨域问题.
前端是vue项目
解决过程
1.面向百度编程
先百度了一番
基本都是说用 blob 这个我真不太了解,但是在项目里找到了别人写的下载方法,也是用的blob,但是根本解决不了跨域问题.
2.摆烂
百度一番没找到解决办法,于是打算摆烂
附件预览界面大约长这样子,直接鼠标在链接上面右键另存为可以下载附件
于是改造了一下原来的下载方法 增加个友好提示
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反向代理来解决这个问题
继续百度
找到一篇地址
用本地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("直接下载失败,请尝试在链接上使用右键另存为");
}
xhr.send();
}
居然成功了,可以下载文件, 于是修改了一下 上测试服务器
最终版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("直接下载失败,请尝试在链接上使用右键另存为");
}
xhr.send();
}
4.新问题
上测试服务器后发现按下载按钮还是失败,发现居然报502
翻了一下nginx的报错日志
no resolver defined to resolve ........
百度了一下
原来nginx代理的地址如果是域名的话 需要增加dns解析 nginx并不会直接用系统的dns
location /download {
resolver 你的dns;
if ($query_string ~* ^(.*)url=(.*)$){
set $imageUrl $2;
proxy_pass $imageUrl;
}
}
设置完 resolver 后 再试 果然成功了
以上就是使用nginx解决前端js下载跨域问题的详细内容，更多关于nginx解决js下载跨域的资料请关注脚本之家其它相关文章！
相关文章
nginx作为web服务器一个重要的功能就是反向代理，关于nginx 反向代理的使用你都了解吗，今天通过本文给大家介绍下nginx反向代理及配置文件的组成部分，感兴趣的朋友一起看看吧2022-02-02
本文主要介绍了nginx实现透转的方法步骤,实现HTTP与HTTPS请求的客户端IP地址透传,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
Apache和Nginx的优缺点详解_动力节点Java学院整理
Nginx和Apache一样，都是HTTP服务器软件，在功能实现上都采用模块化结构设计，都支持通用的语言接口。下面通过本文给大家分享Apache和Nginx比较 功能对比，感兴趣的朋友参考下吧2017-08-08
nginx限速配置的三种方法(limit_req、limit_conn、limit_rate)
本文主要介绍了nginx限速配置的三种方法,主要包括limit_req、limit_conn、limit_rate,本文就详细的介绍一下如何使用,感兴趣的可以了解一下2023-08-08
这篇文章主要介绍了详解nginx使用ssl模块配置支持HTTPS访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了CentOS利用Nginx搭建下载功能服务器,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了nginx worker进程循环的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
本文系统介绍了HTTP状态码分类及常见代码含义,分为1xx（信息）、2xx（成功）、3xx（重定向）、4xx（客户端错误）、5xx（服务器错误）五类,涵盖200、301、403、404、500等典型状态码,说明其应用场景与响应机制2025-10-10
这篇文章主要给大家介绍了关于Nginx一个IP如何配置多个站点的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-09-09
Nginx反向代理配置React前端与Python后端全过程
前后端分离项目里,前端通常是 React 打包后的静态资源,后端是 Python（FastAPI/Flask）提供的 API,生产环境一般用 Nginx 做统一入口,本文只讲 Nginx 反向代理的核心配置思路和关键片段,需要的朋友可以参考下2026-02-02
最新评论