现象
本人项目中对阿里云图片请求进行了两次, 第一次通过 img 标签进行, 第二次通过异步加载获取. 第一次请求到图片, 浏览器会进行缓存, 随后再进行异步请求, 保存跨域失效.
错误信息如下:
Failed to load http://cdn.imayuan.com/831ccd4741a7a56d85f6698a21f4ca69.svg : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8601/' is therefore not allowed access.
解决
通过 http 请求状态码判断第二次异步加载是使用的缓存, 状态码是 200(from cache) . 附: 跟缓存有关的 http 状态码有:
200 OK (from cache) 是浏览器没有跟服务器确认, 直接用了浏览器缓存
304 Not Modified 是浏览器和服务器多确认了一次缓存有效性, 再用的缓存
随后多次尝试清理缓存无效, 后来发现原因是通过 img 标签请求始终在异步请求前面, 故尝试在所有 img 标签加载完成后清理缓存, 则不会出现跨域问题.
发现问题出来 img 标签上面, 服务端做了对跨域的配置后, 响应里面应该有 Access-Control-Allow-Origin 的配置, 但是通过抓取请求发现没有.
结论阿里云 oss 的 img 标签需要手动配置跨域.
<img crossOrigin="anonymous"/>
crossorigin 属性:
anonymous: 如果使用这个值的话就会在请求中的 header 中的带上 Origin 属性, 但请求不会带上 cookie 和其他的一些认证信息.
use-credentials: 这个就同时会在跨域请求中带上 cookie 和其他的一些认证信息.
在使用这两个值时都需要 server 端在 response 的 header 中带上 Access-Control-Allow-Credentials 属性.
来源: http://www.bubuko.com/infodetail-2653912.html