跨域问题问题小结（vue3）---处理http文件链接下载失败

hong.zhiyang

已于 2023-12-27 09:44:36 修改

阅读量7k

点赞数 1

分类专栏： Vue从零开始文章标签： html5 javascript vue.js

于 2023-06-12 18:08:54 首次发布

本文链接：https://blog.csdn.net/m0_63587743/article/details/131174152

版权

Vue从零开始专栏收录该内容

5 篇文章

订阅专栏

const fileUrl = 'http://......'
const replacedUrl = fileUrl.replace(/^http:/, 'https:')
const ele = document.createElement('a')
ele.setAttribute('href', replacedUrl)
ele.setAttribute('download', replacedUrl.split('/')[replacedUrl.split('/').length - 1])
ele.click()

请求后端提供的链接居然是一个http的文件链接

首先对这个地址做了正则判断替换成https

fileUrl.replace(/^http:/, 'https:')

这样做的原因是浏览器会认为在https下打开的http链接是不安全操作，所以会进行拦截，或者访问不成功

替换后运行报错

Mixed Content: The site at 'https://.....cn/' was loaded over a secure connection, but the file at 'https://.....cn/excel/20230612162249172.xlsx' was redirected through an insecure connection. This file should be served over HTTPS. This download has been blocked. See https://blog.chromium.org/2020/02/protecting-users-from-insecure.html for more details.

错误信息告诉我们混合请求（两个地址域名不一致）是被浏览器禁止，处理办法如下：

参考：servlets - Mixed Content The page at was loaded over HTTPS but requested an insecure resource This request has been blocked the content must be served over HTTPS - Stack Overflowhttps://stackoverflow.com/questions/67765238/mixed-content-the-page-at-was-loaded-over-https-but-requested-an-insecure-resour

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">