浏览器端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月前
|
存储 缓存 安全
oss跨域资源共享(CORS Configuration)
oss跨域资源共享(CORS Configuration)
50 4
|
2月前
|
前端开发 API 数据安全/隐私保护
Web前端开发中的跨域资源共享(CORS)解决方案
【2月更文挑战第5天】在Web前端开发中,跨域资源共享(CORS)是一个常见的挑战。本文将探讨CORS的概念和原理,并介绍一些常用的解决方案,包括服务器端配置和前端处理方法,帮助开发者更好地应对跨域请求问题。
103 4
|
2月前
|
前端开发 开发者
前端开发中的跨域资源共享(CORS)解决方案探讨
【2月更文挑战第2天】跨域资源共享(CORS)是前端开发中常见的问题,本文将深入探讨CORS的原理及解决方案,包括简单请求、预检请求以及常用的CORS解决方案,为前端开发者提供深入的理解和应对CORS问题的有效方法。
29 1
|
2月前
|
Java
springboot+cors跨域处理
springboot+cors跨域处理
23 0
|
2月前
|
前端开发 JavaScript API
探索前端开发中的跨域资源共享(CORS)
【2月更文挑战第3天】在前端开发中,跨域资源共享(CORS)是一个至关重要的话题。本文将深入探讨CORS的概念、工作原理以及如何在前端项目中正确配置和处理跨域请求,帮助开发者更好地理解和应用CORS技术。
27 7
|
2月前
|
前端开发 安全 JavaScript
前端开发中的跨域资源共享(CORS)机制
【2月更文挑战第3天】 在前端开发中,跨域资源共享(CORS)机制是一个重要的安全性问题。本文将介绍CORS的概念、原理和实现方式,并探讨在前端开发中如何处理跨域资源请求,以及如何提高网站的安全性。
|
27天前
|
JavaScript 安全 前端开发
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
22 2
|
28天前
|
前端开发 安全 开发者
前端开发中的跨域资源共享(CORS)问题及解决方案探讨
在前端开发中,跨域资源共享(CORS)是一个常见且重要的问题。本文将深入探讨CORS的原理、影响以及解决方案,帮助开发者更好地应对跨域请求问题。
|
2月前
|
前端开发 数据安全/隐私保护 UED
探索前端开发中的跨域资源共享(CORS)
【2月更文挑战第3天】在当今Web开发中,跨域资源共享(CORS)扮演着至关重要的角色。本文将深入探讨CORS在前端开发中的作用和实践经验,带你解锁跨域访问的奥秘。
|
2月前
|
缓存 网络协议 前端开发
浏览器访问缓存都发生了什么
浏览器访问缓存都发生了什么