vue 图片上传到oss跨域

已于 2022-08-09 11:37:59 修改
阅读量1.1k 收藏
点赞数
分类专栏： 开发经验 文章标签： vue.js javascript 前端
于 2022-08-09 11:15:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linlinzzzzz/article/details/126243718
版权

vue 图片上传到oss跨域

时隔这么久，又碰到了上传oss跨域问题，哭辽(;´༎ຶД༎ຶ`)

排查了好久最后发现是这行代码的原因

// 跨域访问携带cookie
axios.defaults.withCredentials = true

当axios跨域访问允许携带cookie时，access-control-allow-orign应该设置具体域名，否则请求无法获取返回数据。但是后端在oss配置里，设置的是access-control-allow-orign:*，理所当然的我gg了👿。
axios.defaults.withCredentials = true代码注释掉之后，一切都顺利了╮(╯▽╰)╭

梦枕黄粱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue页面使用阿里oss上传功能的实例（一）
08-29
本篇文章主要介绍了vue页面使用阿里oss上传功能的实例（一），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue上传图片到oss的方法示例（图片带有删除功能）
12-29
最近Vue项目中，要将用户上传的图片全部上传到oss上， OSS配置项请访问：https://help.aliyun.com/document_detail/64095.html?spm=a2c4g.11186623.6.773.kcD20n OSS平台配置 在平台的概览里面看看自己的基础设置...
Vue 客户端直传OSS跨域、HTTP到HTTPS、上传超时、限制大小问题
GHkmmm的个人博客
03-25 3321
一、整体思路 客户端先向服务端发送请求，请求格式如下 ossPaht：oss绝对地址 fileExt：文件后缀类型 服务端签名，返回数据，格式如下 signedUrl上传目标地址 cdnUrl下载可使用地址 contentType文件类型 通过服务端返回的signedUrl，携带上传的文件请求signedUrl直传OSS 二、问题 跨域（这个不需要前端解决） 协议冲突问题 服务端返回的signedUrl是http协议但是客户端域名却是https，https无法向http发送请求 解
vue上传图片到OSS
小码蚁南丶音的博客
05-16 2429
组件名称：upload-to-ali 对接阿里云-OSS，可通过环境变量配置 OSS 信息，可自定义域名，支持多选、限制文件大小、删除、粘贴上传功能，拖拽上传功能，让上传功能更加简单 重点说明下：对vue版本要求在2.6往上 OSS必须设置跨域 import UploadToAli from "@femessage/upload-to-ali"; Vue.use(UploadToAli...
vue项目 axios上传图片到 阿里云 oss， 跨域，405， 400问题处理
业余前端的职业经历
12-22 3416
跨域问题 服务器端处理。添加请求允许的 请求报错。405 使用 formData格式请求数据 let params = new FormData() 注意 content-type 类型必须是 Content-Type: multipart/form-data 如果有全局设置的axios 的请求拦截的话，注意 防止被更改哦 请求报错 400 先检查下参数有没有写错 大小写什么的。 注意 请求的文件流 须放到最后一个位置上 let params = new FormData() params.ap
vue 上传图片及跨域
anqiai0851的博客
07-15 1253
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res; HttpSer...
vue使用axios并解决跨域问题
Sparkling_Y的博客
03-24 634
后端：Springboot，使用@Mapper。，前面的部分多余了，所以一直404。前端vue版本：2.x。最终效果：成功拿到数据。
vue中axios实现数据交互与跨域问题
10-17
主要介绍了vue中axios实现数据交互与跨域问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
前端Jquery，Vue通过授权URL直传阿里云OSS
11-16
在前端开发中，有时我们需要将用户上传的文件直接存储到云端服务器，比如阿里云的对象存储服务（OSS）。本文将详细介绍如何使用Jquery和Vue.js这两个前端库，结合阿里云OSS提供的API，实现通过授权URL进行文件的直传...
JS 直传OSS JS 代码
12-14
综上所述，使用jQuery和Vue.js实现文件图片上传到阿里云OSS涉及到前端的文件操作、Ajax请求、Vue组件化、跨域配置以及错误处理等多个方面。在实际开发中，应结合后端支持，确保安全性和用户体验。
vue3.0使用axios 解决跨域问题
最新发布
x_h_j_的博客
03-08 2701
走了很多弯路，总结出来的，保姆级别教学直接带你使用，跟着我走，不会报错，如果不行，你来打我。在请求时，如果出现了以下情况中的任意一种，那么它就是跨域请求：跨域问题是指在浏览器环境下，当一个网页的脚本试图访问不同源（域名、协议或端口）的资源时，会发生跨域请求。这种问题主要是由于浏览器的同源策略导致的，该策略是为了防止恶意网站获取用户的敏感信息或进行攻击1。跨域问题出现的具体原因包括：1. 域名不同：浏览器会限制不同域名之间的资源访问。
访问oss中文件出现跨域
weixin_45226511的博客
12-16 3224
在系统中的文件管理，上传到oss对象存储上的doc、xlsx、ptt文件，可以在线预览。 报错Access to XMLHttpRequest at ‘http://xx‘ from origin ‘http://xx‘ has been blocked by CORS policy
VUE 独立部署访问远程oss的JSON文件,出现跨域问题
likeMix的博客
01-28 1667
先将VUE中axios的withCredentials = false 设置要访问的OSS跨域
vue通过临时url上传文件到oss | 跨域 | 请求头 | 等问题解决
LionLone的博客
12-29 924
axios设置 不知原因，看了一天的oss2-python的源码，用工具模拟各种请求，fiddler抓请求，最终发现，请求头中不能有Content-Type，且要携带Access-Control-Request-Headers，值设置为Content-Type，成功上传。 PS: 有大神知道原因的，希望给个解答，不胜感激 const ossService = axios.create({ // ... headers:{ 'Access-Control-Request-Header
vue本地资源上传跨域问题处理
qq_38669865的博客
04-21 1354
config下的index.js文件中配置如下： proxyTable: { '/api':{ target:'http://localhost:项目端口号/项目名称/', changeOrigin:true, pathRewite:{ '^api':'/' } } } 后面调用接口时，接口路径改写成：类似于/api/common/upload即可 ...
OSS阿里云上传文件 前端js下载url跨域问题
博客园搬家测试账号
05-15 5598
场景： 1.后端上传文件至阿里云OSS，返回得到一个URL。 2.前端用这个URL下载文件，ajax请求异常：No 'Access-Control-Allow-Origin' header is present on the requested resource. 3.使用html <a> 标签直接可以下载 分析原因： 1.js和ajax什么的是看不见的易出错的，需要安全保护...
阿里云OSS上传下载跨域问题
ifredom
05-11 7427
OSS文件传输 使用OSS进行上传/下载操作时，时常会遇到跨域问题。 其表现为，直接通过浏览器，可以直接访问已经存储在OSS中得文件地址并下载，但是通过代码却会报跨域问题. 解决办法：登录阿里云OSS控制台，设置允许跨域.(图文详解在文尾) 示例前端代码 前端vue项目示例 下载 const scoreXml = await axios.get(scoreUrl); 上传 <template> <upload-component @click="fnUplo
搞定阿里云oss图片请求跨域
Mrbignose的博客
07-19 5796
阿里云oss图片请求跨域解决方案 在一次实现图片下载的方案中使用了axios来实现图片下载(vue实现图片下载)，实现过程中引用了百度图片的地址和阿里云oss上图片的地址，发现在请求阿里云oss上的图片会出现跨域报错，于是上网百度了一下，具体原因是：当 OSS 收到一个跨域请求（或者 OPTIONS 请求）时，会读取存储空间对应的 CORS 规则，然后进行相应的权限检查。OSS 会依次检查每一条规则，使用第一条匹配的规则来允许请求并返回对应的 header。如果所有规则都匹配失败，则不附加任何 CORS 相
vue上传图片到阿里云oss
weixin_43637720的博客
01-10 936
此方法使用 ali-oss，纯前端实现上传阿里云，并接受返回图片的线上地址，不经过后端。
vue图片上传到oss不回显
05-16
1. 确认你的图片上传到了 OSS，并且路径是正确的。可以通过 OSS 控制台或者 OSS SDK 等方式进行确认。 2. 确认你的 vue 页面中图片的路径是否正确，如果是相对路径，需要注意相对路径的起点是什么。 3. 确认你的 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值