缓存竟也能导致跨域问题!
2019-11-07 18:16
1726 查看
业务背景
由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如图:
问题现象
图片存储再阿里云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.
- 同页面其他外站图片链接就可以正常使用,只有自己OSS的图片有问题
- 多次尝试发现network控制台禁用缓存情况下是没有问题的
- 禁用缓存下载图片后,再启用缓存,此时下载又没有问题了
- 即使强制刷新也仍然下载不了,network显示读取自本地缓存
基本可以猜测是缓存或者使用CDN的问题。而此时阿里工单也回复了:
描述情况基本一样
原因分析
什么是跨域及CORS配置此处不再详述
- 图片存储使用的阿里云OSS,提供默认的域名可以访问图片,只需要OSS设置跨域配置即可
- 使用了CDN,而CDN也同样需要跨域配置(没有配置)
- 页面直接img显示的图片,而img并不会触发跨域,所以当页面打开后img会请求到CDN的图片并缓存到本地,而缓存不带CORS配置,然后ajax请求直接访问本地图片,触发了同源限制,导致跨域报错
解决方法
- 直接使用默认的非CDN地址下载,url = url.replace('file.xxx.com', 'xxx.oss-cn-beijing.aliyuncs.com')替换域名等方式
- 防止使用缓存,ajax请求图片是加上随机参数,url = url + '?s=' + Math.random().toString()
- 配置CDN的CORS,使其直接返回跨域配置
相关文章推荐
- WAS缓存导致修改文件不生效问题
- 页面嵌套 Iframe 产生缓存导致页面数据不刷新问题
- 防止因为自动缓存,导致flash调用http请求返回304的问题
- 关于jsp项目带有外带的javascript发布到tomcat后缓存导致javascript辨别不灵敏的问题
- 使用SpringSession时cookies跨域导致Session不一致问题的解决
- 微信的缓存问题,导致不经后台接口,直接跳转至上次访问的页面
- IIS内核模式缓存导致串号问题
- 并发时,缓存锁导致的相关问题
- JSP缓存问题导致页面显示不全
- Ajax请求缓存问题、中文乱码问题、跨域问题
- 详解nginx代理天地图做缓存解决跨域问题
- ibatis 缓存导致的一个问题
- cdn缓存导致的一次上传并转码覆盖源文件,导致文件有的不能访问问题
- VirtualBox ShareFolder 充当Apache2 源路径时宿主-客户机双缓存机制缺乏沟通导致的微妙问题
- 样式文件跨域导致Respond.js插件在IE浏览器失效的问题
- cdn 导致跨域问题
- ListView的缓存数据复用导致的显示错乱问题
- Discuz!教程之开启了文件缓存导致插件安装语言包不显示中文的问题解决
- 一个NFS缓存管理包的bug导致文件系统满的问题和解决方法
- 页面嵌套加载时,由于域名不一样导致跨域问题导致数据不显示