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

这篇具有很好参考价值的文章主要介绍了跨域问题问题小结(vue3)---处理http文件链接下载失败。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

跨域问题问题小结(vue3)---处理http文件链接下载失败,Vue从零开始,html5,javascript,vue.js文章来源地址https://www.toymoban.com/news/detail-719449.html

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

到了这里,关于跨域问题问题小结(vue3)---处理http文件链接下载失败的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vite+Vue3项目如何获取环境配置,并解决前端跨域问题

    根目录新建.env.development和.env.production文件 package.json配置启动参数 vite命令启动项目时,指定mode参数,加载vite.config.ts文件。 配置代理 在vite.config.ts中配置代理 配置vite-plugin-html 通过vite-plugin-html组件,可以将配置文件中的数据,绑定到index.html中,可以实现不同环境的页面ti

    2024年02月19日
    浏览(66)
  • Ruoyi-Vue处理跨域问题、同时请求多个域名接口(前端处理)

    Ruoyi-Vue项目请求不同地址的接口,主要在于处理跨域问题,即vue.config.js文件处理 1. 修改配置文件(.env.development/.env.production) 2. 修改vue.config.js文件 即新增一个代理。部署项目时, 如果使用nginx等代理方式,记得配置VUE_APP_API_SERVICE对应的路径及跳转地址 3. 新建requestNew.js文件

    2024年02月03日
    浏览(41)
  • 在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题

    uniapp项目在浏览器运行,有可能调用某些接口会出现跨域问题,报错如下图所示: 存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求。同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦。一般来说,浏览

    2024年01月21日
    浏览(59)
  • 跨域情况下,vue如何下载后台接口提供的application/octet-stream文件流Excel文件

    由于跨域,所以无法直接通过window.location.href或者a标签直接下载,直接拼后台接口地址又暴露了后台地址,不可行。 所以在这种跨域情况下,本章讲一下vue如何下载后台接口提供的application/octet-stream文件流Excel文件。 实现前端vue下载后台返回的application/octet-stream文件流 1、使

    2024年02月14日
    浏览(42)
  • 记:vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】

    前言:什么是跨域,网上一搜一大把,所以这里直接跳过,直入主题。 处理方式:不通过后端处理跨域,通过前端+服务器nginx处理。 1.前端涉及处理跨域的必要配置(开发环境、生产环境):vite3、vue3、axios 2.服务器涉及处理跨域的配置(生产环境):nginx【主要用到其配置

    2024年02月01日
    浏览(61)
  • vue3文件下载功能

    定义方法: utils.js 使用 test.vue

    2024年02月12日
    浏览(40)
  • vue3+axios:图片链接转换成二进制文件流后并提交服务器

    1、使用Image类创建一个新的图片。 2、将图片转换成base64。 3、将base64图片使用File类转换成二进制文件流 4、将二进制文件流使用 FormData类转换成binary类型提交服务器。 Image类创建一个新的图片 图片转换成base64 base64转换成二进制文件流 二进制流文件提交到服务器

    2024年02月15日
    浏览(47)
  • 调用hutool包调用http接口处理文件流-文件的上传下载工具类

    hutool工具类get请求获取流: InputStream inputStream = HttpRequest.get(fileUrl).execute().bodyStream(); hutool工具类post请求上传文件流: String resp = HttpRequest.post(url).header(Header.CONTENT_TYPE.getValue(), ContentType.MULTIPART.getValue()).form(params).execute().body(); 完成代码

    2024年01月17日
    浏览(61)
  • #vue3 实现前端下载excel文件模板功能

    一、需求: 前端无需通过后端接口,即可实现模板下载功能。 通过构造一个 JSON 对象,使用前端常用的 第三方库 xlsx ,可以直接将该 JSON 对象转换成 Excel 文件,让用户下载模板 二、效果: 三、源码如下:

    2024年01月19日
    浏览(70)
  • vue3 pdf、word等文件下载

     效果:     table组件

    2024年02月11日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包