解决阿里云OSS跨域问题

Posted wwyz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决阿里云OSS跨域问题相关的知识,希望对你有一定的参考价值。

解决阿里云OSS跨域问题

现象

本人项目中对阿里云图片请求进行了两次,第一次通过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.

解决

  1. 通过http请求状态码判断第二次异步加载是使用的缓存,状态码是200(from cache) 。附:跟缓存有关的http状态码有:
    • 200 OK (from cache) 是浏览器没有跟服务器确认,直接用了浏览器缓存
    • 304 Not Modified 是浏览器和服务器多确认了一次缓存有效性,再用的缓存
  2. 随后多次尝试清理缓存无效,后来发现原因是通过img标签请求始终在异步请求前面,故尝试在所有img标签加载完成后清理缓存,则不会出现跨域问题。
  3. 发现问题出来img标签上面,服务端做了对跨域的配置后,响应里面应该有Access-Control-Allow-Origin的配置,但是通过抓取请求发现没有。
  4. 结论阿里云oss的img标签需要手动配置跨域。
    <img crossOrigin="anonymous"/>

crossorigin属性:
anonymous:如果使用这个值的话就会在请求中的header中的带上Origin属性,但请求不会带上cookie和其他的一些认证信息。
use-credentials:这个就同时会在跨域请求中带上cookie和其他的一些认证信息。
在使用这两个值时都需要server端在response的header中带上Access-Control-Allow-Credentials属性。






以上是关于解决阿里云OSS跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

阿里云OSS------地址跨域

阿里云OSS------地址跨域

阿里云OSS------地址跨域

阿里云OSS跨域设置配置后不生效

盛事通上传oss失败

阿里云OSS存储桶上传视频