img 跨域 和 缓存

一个奇怪的问题,明明图片那边配置了允许跨域,但在禁用缓存的情况,js fetch 图片都正常。但不停用缓存时,就会有跨域问题。

图片所在域名是 b.com 

页面域名是 a.com

图片服务配置了Access-Control-Allow-Origin 允许a.com跨域访问

理论上,js fetch图片是没问题的,因为允许跨域。但实际上,遇到的场景是 在页面用img展示了图片后,通过js去fetch图片转base64时,报跨域。

定位问题步骤:

1. 查看network ,查看fetch 图片时发起的请求,报跨域。

2. 在console上运行代码fetch另一张图片,正常,network也有Access-Control-Allow-Origin

3. 在代码改用成功的那张图片地址,一切正常,在fetch时查看network发现,请求响应来自缓存

4. 勾选禁用缓存,原来有问题的图片,也能正常fetch了

5. 取消禁用缓存,换一张图片,再次跨域,查看原来 img的图片请求,确实没有Access-Control-Allow-Origin

结论: 当使用缓存时,img请求的图片没有响应头Access-Control-Allow-Origin,再次用js来fetch图片时复用了缓存请求,响应头并没有Access-Control-Allow-Origin,浏览器认为这个请求不支持跨域。

当不使用缓存时,fetch图片时重新发起了请求,此时响应头返回了Access-Control-Allow-Origin,支持跨域,于是正常。

一般我们不会去限制用户浏览器不能使用缓存,缓存是提高前端性能的一种有效手段。于是可以考虑,fetch时加入url参数来规避缓存,这样就能舒服的跨域请求图片了。

当然,如果图片本身就不允许你的域名跨域,再怎么取消缓存也无济于事。

参考:<img>图片 crossOrigin=anonymous 导致 onload error 失败 - 掘金

相关推荐

  1. img 和 缓

    2023-12-31 18:02:03       60 阅读
  2. 缓冲和缓的区别

    2023-12-31 18:02:03       58 阅读
  3. 第六章 数据库和缓

    2023-12-31 18:02:03       61 阅读
  4. 】同源策略、解决

    2023-12-31 18:02:03       56 阅读
  5. 解决方案

    2023-12-31 18:02:03       33 阅读
  6. 问题+解决express

    2023-12-31 18:02:03       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-31 18:02:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-31 18:02:03       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-31 18:02:03       82 阅读
  4. Python语言-面向对象

    2023-12-31 18:02:03       91 阅读

热门阅读

  1. 39. 组合总和

    2023-12-31 18:02:03       46 阅读
  2. pyqt的qlabel样式调整办法

    2023-12-31 18:02:03       58 阅读
  3. CJ系列D-Net使用手册

    2023-12-31 18:02:03       50 阅读
  4. VIM8 文本实战学习

    2023-12-31 18:02:03       52 阅读
  5. 算法训练营Day32

    2023-12-31 18:02:03       61 阅读
  6. WPF 基础入门(样式)

    2023-12-31 18:02:03       61 阅读
  7. 什么是ajax,为什么使用ajax?

    2023-12-31 18:02:03       66 阅读
  8. ssh连接docker与宿主机进入docker环境变量不一致

    2023-12-31 18:02:03       72 阅读