文档章节

缓存竟也能导致跨域问题!

张豪飞
 张豪飞
发布于 11/07 11:52
字数 618
阅读 900
收藏 4

​​cors-blog-main.jpg​​

业务背景

由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如图:

image.png

问题现象

图片存储再阿里云OSS,阿里云OSS的CORS设置的跨域并没有问题:

 

1access-control-allow-methods: GET, POST, PUT, DELETE, HEAD
2access-control-allow-origin: *
3access-control-max-age: 600

 

打开页面图片能正常显示,但是下载(ajax请求图片)会因为跨域报错:

Access to XMLHttpRequest at '' from origin 'http://192.168.13.133:8888' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

image.png

 

  1. 同页面其他外站图片链接就可以正常使用,只有自己OSS的图片有问题
  2. 多次尝试发现network控制台禁用缓存情况下是没有问题的
  3. 禁用缓存下载图片后,再启用缓存,此时下载又没有问题了
  4. 即使强制刷新也仍然下载不了,network显示读取自本地缓存

基本可以猜测是缓存或者使用CDN的问题。而此时阿里工单也回复了:

 

image.png

描述情况基本一样

 

原因分析

什么是跨域及CORS配置此处不再详述

  1. 图片存储使用的阿里云OSS,提供默认的域名可以访问图片,只需要OSS设置跨域配置即可
  2. 使用了CDN,而CDN也同样需要跨域配置(没有配置)
  3. 页面直接img显示的图片,而img并不会触发跨域,所以当页面打开后img会请求到CDN的图片并缓存到本地,而缓存不带CORS配置,然后ajax请求直接访问本地图片,触发了同源限制,导致跨域报错

解决方法

  1. 直接使用默认的非CDN地址下载,url = url.replace('file.xxx.com', 'xxx.oss-cn-beijing.aliyuncs.com')替换域名等方式
  2. 防止使用缓存,ajax请求图片是加上随机参数,url = url + '?s=' + Math.random().toString()
  3. 配置CDN的CORS,使其直接返回跨域配置

原文:https://www.yuque.com/zhanghaofei/blog/xrpz9p

© 著作权归作者所有

张豪飞
粉丝 31
博文 45
码字总数 24709
作品 0
郑州
程序员
私信 提问
加载中

评论(9)

dingdayu
dingdayu
我遇到的这个是上传或者操作的场景吧,纯GET没有吧。
dingdayu
dingdayu
哦,你这个是ajax上传,那触发跨域了,得设置跨域头了,OSS后台直接可以配置。
张豪飞
张豪飞 博主
不是上传,是下载访问
dingdayu
dingdayu
越来越没评论的动力了,最初评论了4次,才评论成功,每次都要手输,结果最后意思都有出入了,这次评论又甭了两次,这是第三遍手输了。
原本评论意思是,由于你是ajax请求,非浏览器dom加载请求,所以触发同源策略。
张豪飞
张豪飞 博主
是的,首先img的加载不触发跨域,所以本地的缓存没有CORS
红薯
红薯
图片裂了
dingdayu
dingdayu
两次评论时间间隔很短,即使内容不同,会有提示,可是提示后,输入框里内容没了,是不是体验不太好。
张豪飞
张豪飞 博主
没想到红薯还能评论,啊哈哈。
张豪飞
张豪飞 博主
才发现这个 下载图片到本地 有什么用,哈哈
XMLHttpRequest对象的扩展问题

解决XMLHttpRequest请求的缓存问题:增加时间戳 解决AJAX应用的中文问题: 请求数据中包含中文,服务器端程序接收错误导致乱码 1.png 响应数据中包含中文,编码设置错误导致浏览器中看到的结...

小小蒜头
2017/11/14
0
0
php中ajax跨域请求---小记

php中ajax跨域请求---小记 前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({   type:'get',   url:'http://wan.xxx.com/xxx.js',   success:functio......

thinkyoung
2015/08/31
0
0
【前端词典】进阶必备的网络基础(下)

前言 在上一篇我提到了前端面试频率较高的几个网络基础知识,这一篇我会把上一篇遗留的五个尽力讲清楚。如果还没有来得及看上一篇,那么现在可以一起看。 目录 接下来我会讲以下内容: 五类 ...

小生方勤
03/06
0
0
HTTP 的15个常见知识点复习

前言 自从入职新公司到现在,我们前端团队内部一直在做 📖每周一练 的知识复习计划,我之前整理了一个 每周一练 之 数据结构与算法 学习内容,大家也快去看看~~ 最近三周,主要复习 网络基...

pingan8787
06/22
0
0
Nginx 缓存引发的跨域惨案

原文出处:网易乐得 - 张捷 1. 前言 贵金属wap版直播间上线后,偶尔有用户反馈,在进入wap直播间的时候,出现空白页面,但是重新刷新又可以正常显示了。我们曾一度认为是网络请求异常或兼容问...

网易乐得 - 张捷
2017/08/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kafka实战(五) - 核心API及适用场景全面解析

1 四个核心API ● Producer API 允许一个应用程序发布一串流式的数据到一个或者多个Kafka topic。 ● Consumer API 允许一个应用程序订阅一个或多个topic ,并且对发布给他们的流式数据进行处...

JavaEdge
今天
9
0
实现线程的第三种方式——Callable & Future

Callable Runnable 封装一个异步运行的任务, 可以把它想象成为一个没有参数和返回值的异步方 法。Callable 与 Runnable 类似, 但是有返回值。Callable 接口是一个参数化的类型, 只有一 个...

ytuan996
今天
11
0
OSChina 周六乱弹 —— 不要摁F了!

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 : 朴树写的词曲都给人一种莫名的失落感,不过这首歌他自己却没有唱,换成赵传这种高音阶嘶喊的确很好,低沉但却有力,老男人的呐喊...

小小编辑
今天
12
0
Android Binder机制 - interface_cast和asBinder讲解

研究Android底层代码时,尤其是Binder跨进程通信时,经常会发现interface_cast和asBinder,很容易被这两个函数绕晕,下面来讲解一下: interface_cast 下面根据下述ICameraClient例子进行分析...

天王盖地虎626
昨天
13
0
计算机实现原理专题--存储器的实现(二)

计算机实现原理专题--存储器的实现(一)中描述了一种可以记住输入端变化的装置。现需要对其功能进行扩充,我们将上面的开关定义为置位,下面的开关定义为复位,然后需要增加一个保持位,当保...

FAT_mt
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部