解决阿里云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属性。
解决阿里云OSS跨域问题的更多相关文章
- 解决阿里云OSS The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint的办法
以前有一个上海节点的存储包,一直使用正常.最近购买了一个全国的存储包,发现在上传文件的时候有这个问题. 尝试了很多办法,还提交了工单,都没有解决. 最后解决办法如下: 1.在阿里云OSS管理控制台下, ...
- 解决阿里云OSS The requested bucket name is not available的办法
今天在创建Bucket的时候遇到了这个问题 The requested bucket name is not available. The bucket namespace is shared by ...
- Markdown图片存储解决方法-利用阿里云OSS
我们在用markdown写一些博客或者文章的时候,常常需要引用一些图片,一般都是找一个免费的图床上传,然后复制图片链接在我们的markdown文章中.类似像这样: 存在的隐患 一般的免费图片托管网站有 ...
- vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法
首先,vue和阿里云oss上传图片结合参考了 这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神 ...
- Spring Boot 集成阿里云 OSS 进行文件存储
最近因为项目中需要存储很多的图片,不想存储到服务器上,因此就直接选用阿里云的对象服务(Object Storage Service,简称 OSS)来进行存储,本文将介绍 Spring Boot 集成 ...
- 阿里云OSS整合
一.对象存储OSS 为了解决海量数据存储与弹性扩容(主要是静态文件的存储例如图片,语音,视频等),项目中我们通常采用云存储的解决方案- 阿里云OSS. 1.开通"对象存储OSS"服 ...
- 整合阿里云OSS
整合阿里云OSS 一.对象存储OSS 为了解决海量数据存储与弹性扩容,采用云存储的解决方案- 阿里云OSS. 1.开通"对象存储OSS"服务 (1)申请阿里云账号 (2)实名认证 ...
- 用DzzOffice管理阿里云OSS
在DzzOffice分两种方式管理阿里云OSS 1.把阿里云oss作为多人或企业的共享网盘使用. 2.接入个人的阿里云oss管理,可同时管理多个bucket,多个bucket之间可以互传文件. 下面先 ...
- 如何用云存储和CDN加速网站图片视频、阿里云OSS的使用(转)
总有人说阿里云主机带宽小,那只是因为你还停留在单机架构上. 阿里的架构设计,云主机主要用来跑程序的,附件的存储和访问主要靠OSS. 有人又会说了,OSS按存储费+流量双重计费伤不起,只是你不知道OSS ...
随机推荐
- win7下openvpn不能自动加路由
在win7下用openvpn一直报这个错误,配置文件里的路由一直加不上,但是可以拔得上服务器,只好手工加路由.Thu Apr 07 23:13:51 2011 Notified TAP-Win32 d ...
- HDU 3068 最长回文(manachar算法)
最长回文 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- Hive文件的存储格式
hive文件存储格式包括以下几类: TEXTFILE SEQUENCEFILE RCFILE 自定义格式 其中TEXTFILE为默认格式,建表时不指定默认为这个格式,导入数据时会直接把数据文件拷贝到h ...
- Educational Codeforces Round 37-G.List Of Integers题解
一.题目 二.题目链接 http://codeforces.com/contest/920/problem/G 三.题意 给定一个$t$,表示有t次查询.每次查询给定一个$x$, $p$, $k$,需 ...
- 【POJ】1935 Journey(树形dp)
题目 传送门:QWQ 分析 凉凉. 答案是所有要经过的点到根所经过的边权和减去最大的边权. 代码 vector好慢啊 #include <cstdio> #include <vect ...
- 使用WebClient與HttpWebRequest的差異
在<Windows Phone 7-下載檔案至Isolated Storage>提到了透過WebClient的功能將網站上的檔案下載至 WP7的Isoated Storage之中.但實際的 ...
- memcached配置 (初级)以及测试
一.memcached安装 memcached依赖 $ sudo apt-get install libevent-dev 安装memcached服务 $ sudo apt-get install ...
- Git同时提交到多个远程仓库
使用git同时提交到多个远程库的操作方式为: 比如我需要你将同一份代码提交到如下的两个库中: https://gitee.com/FelixBinCloud/recruit.git https://g ...
- go run helper
# go run helper -a :强制编译相关代码,不论编译代码是否最新 -n :打印编译过程需要用到的命令,但不真正执行他们 -p n :并行编译,n为并行的数量 -v :列出被编译的代码包的 ...
- AngularJS学习笔记(2)——与用户交互的动态清单列表
与用户交互的动态清单列表 以我之前写的一个清单列表页面作为例子(MVC模式的清单列表效果),优化前代码如下: <!DOCTYPE html> <html ng-app="t ...