解决阿里云OSS跨域问题

Love The Way You Lie 2022-05-09 00:06 277阅读 0赞

# 解决阿里云OSS跨域问题 #

### 现象描述 ###

> 本人项目中对阿里云图片请求进行了两次，第一次通过img标签进行，第二次通过异步加载获取。第一次请求到图片，浏览器会进行缓存，随后再进行异步请求，保存跨域失效。  
> 错误信息如下：  
> Failed to load [http://cdn.imayuan.com/831ccd4741a7a56d85f6698a21f4ca69.svg:][http_cdn.imayuan.com_831ccd4741a7a56d85f6698a21f4ca69.svg] No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘[http://localhost:8601][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标签需要手动配置跨域。

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

[http_cdn.imayuan.com_831ccd4741a7a56d85f6698a21f4ca69.svg]: http://cdn.imayuan.com/831ccd4741a7a56d85f6698a21f4ca69.svg:
[http_localhost_8601]: http://localhost:8601