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

绝地灬酷狼 2023-05-30 14:59 8阅读 0赞

# 业务背景 #

由于页面设计需要，页面展示图片，并可点击下载按钮进行下载（需要前端打包多个图片，所以需要使用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][image.png 1]

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

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

![image.png][image.png 2]

描述情况基本一样

# 原因分析 #

什么是跨域及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，使其直接返回跨域配置

[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzE1NzMwMzI5Njc1NzktYjNiZDlhMTktMzcwNy00YmZlLWIyZjUtN2RjNTI5OGYxMGVjLnBuZw?x-oss-process=image/format,png
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzE1NzMwMzM3NTMxNjItNjEyOWY0NjUtOTRhNS00MTM5LTg3OGQtNWFkMjlhYTBhNzMwLnBuZw?x-oss-process=image/format,png
[image.png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzE1NzMwMzQ2MDQ2NzQtM2UxYzY0MmQtZTc2MS00ZTkwLWEwYzktZDliMGMwM2MyMDdmLnBuZw?x-oss-process=image/format,png