浏览器端CORS策略 + 缓存策略 导致的 跨域策略失效 问题

简介: ### 问题现象 DataV的屏幕上发现了这么个诡异的现象: 在开发的屏幕中,用xhr加载图片供canvas渲染,时好时坏,报错的异常是:跨域失败,查看network的请求,在失败的时候,图片返回的header里确实缺失了cors的几个关键信息。 而且开发的同学经常是好的,到了用户手里就不行。 服务器端的oss策略仔细检查了,没有问题, 而且屏幕上有时候是好的,说明服务至少

问题现象

DataV的屏幕上发现了这么个诡异的现象:

在开发的屏幕中,用xhr加载图片供canvas渲染,时好时坏,报错的异常是:跨域失败,查看network的请求,在失败的时候,图片返回的header里确实缺失了cors的几个关键信息。

而且开发的同学经常是好的,到了用户手里就不行。

服务器端的oss策略仔细检查了,没有问题, 而且屏幕上有时候是好的,说明服务至少正常过。oss的接口幂等基本上不用怀疑,所以把疑问再次转回到客户端。

在一次本地重现之后,在network里过滤出错图片地址,结果发现除了 xhr的请求,还有一个标签发起的请求, 把调试器的缓存关闭之后,刷新屏幕页面,重现了。

故障原因

上述页面有两个请求指向同一个 图片地址, 当img标签先行的时候,

<img src="pic.png"/>

浏览器返回了图片,但是由于img标签发起请求的时候并不会带上 Origin头,所以Aliyun OSS在返回的response header 里并没有带上 cors需要的 Access-Control-Allow-Origin 等信息,因为 标签并不受同源策略限制。 于是浏览器 cache了这个图片请求,当然也包括header信息。

当 xhr再次发起对这个图片的请求时,命中了浏览器缓存,这时候问题就出现了,header里没有告诉xhr可以信任当前域,所以浏览器拒绝了这个请求。

解决办法

最简单的办法,把两个调用地址区分开,xhr可以加个 ?xhr

所以这种异常,不是OSS的锅

浏览器需要改进么?

目前浏览器缓存策略只是根据资源地址来cache,并没有区分调用形式,以及调用时header的差异。
作为资源cache,也合情合理。

不过历史原因, 图片资源、script标签 等,浏览器一直没有对这些请求开启同源策略限制,当然也无法开启(一旦大量的站点要挂)。

有没有必要开启? 能不能开启? 这是另外的问题,但是Origin的头可以先带上。

目录
相关文章
|
1月前
|
缓存 算法 数据挖掘
深入理解缓存更新策略:从LRU到LFU
【10月更文挑战第7天】 在本文中,我们将探讨计算机系统中缓存机制的核心——缓存更新策略。缓存是提高数据检索速度的关键技术之一,无论是在硬件还是软件层面都扮演着重要角色。我们会详细介绍最常用的两种缓存算法:最近最少使用(LRU)和最少使用频率(LFU),并讨论它们的优缺点及适用场景。通过对比分析,旨在帮助读者更好地理解如何选择和实现适合自己需求的缓存策略,从而优化系统性能。
48 3
|
2月前
|
JSON 安全 前端开发
浅析CORS跨域漏洞与JSONP劫持
浅析CORS跨域漏洞与JSONP劫持
89 3
|
13天前
|
开发框架 中间件 Java
如何处理跨域资源共享(CORS)的 OPTIONS 请求?
处理 CORS 的 OPTIONS 请求的关键是正确设置响应头,以告知浏览器是否允许跨域请求以及允许的具体条件。根据所使用的服务器端技术和框架,可以选择相应的方法来实现对 OPTIONS 请求的处理,从而确保跨域资源共享的正常进行。
|
13天前
|
JavaScript 前端开发 API
跨域资源共享(CORS)的工作原理是什么?
跨域资源共享(CORS)通过浏览器和服务器之间的这种交互机制,在保证安全性的前提下,实现了跨域资源的访问,使得不同源的网页能够合法地获取和共享服务器端的资源,为现代Web应用的开发提供了更大的灵活性和扩展性。
|
19天前
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
62 7
|
24天前
|
存储 缓存 监控
利用 Redis 缓存特性避免缓存穿透的策略与方法
【10月更文挑战第23天】通过以上对利用 Redis 缓存特性避免缓存穿透的详细阐述,我们对这一策略有了更深入的理解。在实际应用中,我们需要根据具体情况灵活运用这些方法,并结合其他技术手段,共同保障系统的稳定和高效运行。同时,要不断关注 Redis 缓存特性的发展和变化,及时调整策略,以应对不断出现的新挑战。
59 10
|
19天前
|
Web App开发 缓存 UED
如何设置浏览器的缓存策略?
【10月更文挑战第23天】通过合理地设置浏览器的缓存策略,可以在提高网页性能、减少网络流量的同时,确保用户能够获取到最新的内容,从而提升用户体验和网站的性能优化效果。
58 4
|
18天前
|
数据采集 Web App开发 JavaScript
爬虫策略规避:Python爬虫的浏览器自动化
爬虫策略规避:Python爬虫的浏览器自动化
|
20天前
|
存储 消息中间件 缓存
缓存策略
【10月更文挑战第25天】在实际应用中,还需要不断地监控和调整缓存策略,以适应系统的变化和发展。
|
24天前
|
缓存 监控 NoSQL
Redis 缓存穿透及其应对策略
【10月更文挑战第23天】通过以上对 Redis 缓存穿透的详细阐述,我们对这一问题有了更深入的理解。在实际应用中,我们需要根据具体情况综合运用多种方法来解决缓存穿透问题,以保障系统的稳定运行和高效性能。同时,要不断关注技术的发展和变化,及时调整策略,以应对不断出现的新挑战。
42 4

热门文章

最新文章

下一篇
无影云桌面