nginx 下前端 跨域 下载文件

1 篇文章 0 订阅
1 篇文章 0 订阅

使用 layui 上传文件后,需要下载,但是下载文件在上传的时候为了不重复,文件名直接使用了新规则保存,下载文件的时候需要将原来的文件名还原回去;但是由于跨域问题,可以下载,但无法重命名,html 的a标签 的属性 download 无法重命名,花了几个小时,找到一种方法,记录下:
html 的 form表单 下载文件法:
后台

@RequestMapping(value = "url", method = RequestMethod.GET)
    public void downloadEdiFile(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String mainUrl = request.getParameter("fileUrl");//获取信息路径,包括文件路径、文件名、token
        String fileUrl = mainUrl.substring(mainUrl.indexOf("/"),mainUrl.indexOf("?"));//文件路径
        String mianFileName = mainUrl.substring(0,mainUrl.indexOf("/"));//文件名
        String fileExtension = fileUrl.substring(fileUrl.lastIndexOf("."));//文件后缀
        String fileName = mianFileName+fileExtension;//新的文件名(带后缀)
        //获取文件保存地址
        String filePath = "http://112.112.223.229:1013/fileload" + fileUrl;
        // 从网络读取文件
        URL url = new URL(filePath);
        URLConnection conn = url.openConnection();
        InputStream txtIn = conn.getInputStream();
        //读取文件
//        InputStream txtIn = new FileInputStream(new File(filePath));
        OutputStream os = response.getOutputStream();
        String userAgent = request.getHeader("user-agent").toLowerCase();
        if (userAgent.contains("msie") || userAgent.contains("like gecko")) {
            // win10 ie edge 浏览器 和其他系统的ie
            fileName = URLEncoder.encode(fileName, "UTF-8");
        } else {
            // 文件名转码
            fileName = new String(fileName.getBytes("UTF-8"), "iso-8859-1");
        }
        response.setContentType("application/octet-stream; charset=UTF-8");
        response.setHeader("Content-Disposition", "attachment; filename=" + fileName);// @TODO 下载的文件名称
        //文件缓存区
        byte[] bytes = new byte[1024];
        //判断输入流中的数据是否已经读完的标致
        int len = 0;
        while ((len = txtIn.read(bytes)) > 0) {
            os.write(bytes, 0, len);
        }
        if (os!=null){
            os.close();
        }
        if (txtIn!=null){
            txtIn.close();
        }
    }

简单的拼接路径,其中拼接了token和fileName

html js代码

//按钮点击事件
$(document).on('click', '.upload-btn', function () {
            var fileUrl = $(this).parent().parent().siblings("td[data-field='fileUrl']").children()[0].innerHTML;
            var fileName = $(this).parent().parent().siblings("td[data-field='fileName']").children()[0].innerHTML;
            if (fileName === null || fileName.length === 0) {
                fileName = radioData.procPlanName + "-" + ($(this).parent().parent().siblings("td[data-field='procRecipeName']").children()[0].innerText);
            }
            //fileUrl 为文件下载路径;fileName为文件名
            downloadFile(fileUrl, fileName);
        });

        //form 表单经过测试,发现当路径找不到文件时,会跳转至报错页面;为了不跳转,界面实现一个隐藏的iframe框,使用 target=\"mangguo\" 指向它
        function iframeFileFlag() {
            if (iframeFlag === false) {
                iframeFlag = true;
                alert("文件不存在或已失效");
            }
        }

        //下载文件
        function downloadFile(fileUrl, fileName) {
            iframeFlag = false;
            var $downForm = $("<form method='get' target=\"mangguo\"'></form>");
            //后台路径
            $downForm.attr("action", zuulUrl + "/file/upload/url");
            var $input = $("<input type='hidden'>");
            $input.attr("name", "fileUrl");
            var mainUrl = fileName + fileUrl + "?_token=" + _token;
            $input.val(mainUrl);
            $downForm.append($input);
            $(document.body).append($downForm);
            //提交表单,实现下载
            $downForm.submit();
        }

html

<button type="button" class="layui-btn upload-btn"><i class="layui-icon"></i>下载文件</button>

<iframe name="mangguo" style="display: none" onload="iframeFileFlag()"></iframe>

ps:代码参考了一位网友的答案;但是找不到那个界面了,感谢他

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端页面需要向不同名的服务器发送请求时,由于浏览器的同源策略限制,会导致请求失败。为了解决这个问题,可以通过配置nginx来实现前端。 下面是一种常见的nginx配置前端的方法: 1. 打开nginx的配置文件,一般位于`/etc/nginx/nginx.conf`或`/usr/local/nginx/conf/nginx.conf`。 2. 在http块内添加以下配置: ``` http { ... server { ... location / { # 允许指定的名进行请求 add_header Access-Control-Allow-Origin *; # 允许指定的请求方法进行请求 add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; # 允许指定的请求头进行请求 add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; # 允许携带cookie进行请求 add_header Access-Control-Allow-Credentials true; # 预检请求的有效期 add_header Access-Control-Max-Age 3600; ... } ... } ... } ``` 以上配置中,`add_header`指令用于添加响应头信息,实现请求。其中: - `Access-Control-Allow-Origin`指定允许请求的名,可以使用通配符`*`表示允许所有名。 - `Access-Control-Allow-Methods`指定允许的请求方法。 - `Access-Control-Allow-Headers`指定允许的请求头。 - `Access-Control-Allow-Credentials`指定是否允许携带cookie进行请求。 - `Access-Control-Max-Age`指定预检请求的有效期,单位为秒。 配置完成后,保存并重启nginx服务,使配置生效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值