解决阿里云OSS跨域问题
解决阿里云OSS跨域问题
现象
本人项目中对阿里云图片请求进行了两次，第一次通过img标签进行，第二次通过异步加载获取。第一次请求到图片，浏览器会进行缓存，随后再进行异步请求，保存跨域失效。
错误信息如下：
Failed to load http://cdn.imayuan.com/831ccd4741a7a56d85f6698a21f4ca69.svg: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8601' is therefore not allowed access.
解决
- 通过http请求状态码判断第二次异步加载是使用的缓存，状态码是200(from cache) 。附：跟缓存有关的http状态码有：
- 200 OK (from cache) 是浏览器没有跟服务器确认，直接用了浏览器缓存
- 304 Not Modified 是浏览器和服务器多确认了一次缓存有效性，再用的缓存
- 随后多次尝试清理缓存无效，后来发现原因是通过img标签请求始终在异步请求前面，故尝试在所有img标签加载完成后清理缓存，则不会出现跨域问题。
- 发现问题出来img标签上面，服务端做了对跨域的配置后，响应里面应该有Access-Control-Allow-Origin的配置，但是通过抓取请求发现没有。
- 结论阿里云oss的img标签需要手动配置跨域。
<img crossOrigin="anonymous"/>crossorigin属性:
anonymous：如果使用这个值的话就会在请求中的header中的带上Origin属性，但请求不会带上cookie和其他的一些认证信息。
use-credentials：这个就同时会在跨域请求中带上cookie和其他的一些认证信息。
在使用这两个值时都需要server端在response的header中带上Access-Control-Allow-Credentials属性。
转载于:https://www.cnblogs.com/wwyz/p/9210856.html
解决阿里云OSS跨域问题相关推荐
- 阿里云OSS跨域报错：Access to XMLHttpRequest at ‘...‘ ... blocked by CORS policy: No ‘Access-Control-Allow
错误标签:阿里云OSS, 跨域请求, No 'Access-Control-Allow-Origin' 浏览器具体报错内容: Access to XMLHttpRequest at 'https:// ...
- 5分钟解决阿里云oss对象存储
5分钟解决阿里云OSS对象存储 后附关键代码 启动代码如下: pom.xml里添加依赖 com.aliyun.oss aliyun-sdk-oss 2.8.3 1.建类AliyunOSSClientU ...
- 解决阿里云oss文件上传部分MP4格式视频文件上传导致上传崩溃问题
解决阿里云oss文件上传部分MP4格式视频文件上传导致上传崩溃问题 问题描述 java程序,使用阿里云oss文件上传服务,在测试时偶然发现,我用苹果手机开启高清进行摄像,将原图通过qq传到电脑上,在电 ...
- 解决阿里云OSS使用URL无法访问图片
解决OSS使用URL无法访问图片 一.问题概述: 1.使用URL访问OSS存储的图片时显示XML代码 2.使用URL访问OSS存储的图片时自动下载 二.解决方式: 如果大家对HTTP头部内容不清晰的可 ...
- 解决阿里云OSS，打开图片地址无法预览，直接下载
文章目录 前言 一.上代码 1.设置类型 2.getcontntType 总结 注意 前言 问题描述: 阿里云对象存储上传的图片打开是下载,并不是我想要的效果,我希望的是可以直接预览:可以直接在网址上 ...
- 解决阿里云OSS，打开图片地址直接预览
问题描述: 阿里云对象存储上传的图片打开是下载,并不是我想要的效果,我希望的是可以直接预览:可以直接在网址上面查看的那种.首先你得检查一下你的图片contentType,一般是通过代码设置的,直接在阿 ...
- 阿里云视频点播本地调试跨域问题，阿里云视频点播跨域问题
点播控制台>域名管理>缓存配置>自定义HTTP响应头
- 解决阿里云oss访问url直接下载而不是在线预览的问题
内容参考自网络,若侵权请联系删除 直接给出参考链接即可: 链接一:https://blog.csdn.net/oRanXiaoLuo/article/details/103364928?spm ...
- 阿里云OSS上传请求403问题的完美解决方案及uni.uploadFile h5上传文件失败完美解决方案
在使用阿里云OSS服务时,会用到跨域AJAX上传,上传时报403错误,之前遇到过此类问题并成功解决了,但时间长了遗忘,因此记录下来以备后续学习了解ajax跨域上传OSS. ajax跨域上传首先会发送o ...
最新文章
- Windows系统笔记本禁用自带键盘
- [Java入门笔记] Java语言基础（二）：常量、变量与数据类型
- 使用数据库表查询的方式直接获得CRM服务订单的sold to party信息
- linux指定内核位置,ARM linux内核启动时几个关键地址
- C语言预处理功能——关于字符串化和符号粘贴
- python中key_python属性和key的区别？
- 黑客是否可以攻击被拔掉网线的电脑？
- HALCON：图像采集之同步采集（synchronous）与异步采集（asynchronous）
- Latex中导入VISIO图片
- 台北三日自助游攻略（转载）
- 排查线上CPU飙高的原因和解决
- 找工作笔试面试那些事儿(14)---轻松一下，谈谈面试注意的点
- Python Scapy（2.3.1）文档学习(四)：高级用法
- 音视频开发-SRS 4.0流媒体服务器系列
- 全国青少年编程等级考试scratch三级真题2021年9月（含题库答题软件账号）
- 消息队列的消息积压解决办法
- linux--积累--分析清理服务器大文件--分析清理磁盘空间
- pythonl list去子集
- Go语言开发k8s-04-Service操作
- matlab汽车驱动力与行驶阻力,用matlab绘制汽车驱动力 行驶阻力平衡图