Access to image at ‘xxx‘ from origin ‘xxx‘ has been blocked by CORS policy解决方案

如图所示，控制台出现下面的报错：

但是正常加载了图片

这个错误表明你尝试从某个源（origin）加载阿里云上的图片时，浏览器因为CORS（跨源资源共享）策略阻止了这次请求。尽管图片能正常显示，但浏览器的控制台仍然会报告这个错误，因为请求不满足CORS的要求。

什么是CORS?

CORS是一个安全特性，它允许网页上的脚本（如JavaScript）访问来自不同源（domain, protocol, 或 port）的资源，但前提是这些资源必须明确允许这种跨源请求。这通常通过在服务器端设置响应头（headers）来实现的，特别是

Access-Control-Allow-Origin

这个响应头。

解决方案：

1.检查前端代码

确保你的前端代码没有以非标准的方式（如通过AJAX或Fetch API）去加载图片，因为这可能会导致CORS问题。图片通常应该通过<img>标签或CSS背景图片等方式加载。

 <div class="user" @click="editCropper()">
<img v-bind:src="options.img" title="点击上传头像" />
</div>

2.清除或停用浏览器缓存（最简单）

有时候，浏览器缓存可能会导致CORS问题。尝试清除缓存或使用无痕浏览模式再次加载页面。

或者在网络那里禁用浏览器缓存（下图所示）

原因：

当浏览器缓存了一个跨域资源（如图片）时，它会保存与该资源相关的所有信息，包括CORS相关的HTTP头（如Access-Control-Allow-Origin）。如果CORS策略后来发生了更改（例如，允许了新的源），但由于缓存的存在，浏览器可能仍然会使用旧的、不允许新源的CORS头信息。

停用浏览器缓存可能会对网页的性能和用户体验产生负面影响，因为缓存可以减少不必要的网络请求和延迟。因此，在解决CORS问题时，应该优先考虑在服务器端配置正确的CORS策略，而不是简单地停用浏览器缓存。

3.检查并修改图片资源的CORS设置：

如果图片是存储在阿里云的对象存储服务（如OSS）中，你可以为该资源或整个存储桶设置CORS规则。这样，当浏览器发起跨源请求时，OSS会返回适当的CORS响应头。

在OSS中，你可以通过控制台或API来配置CORS规则。通常，你需要添加类似以下的规则：

[  
    {  
        "AllowedOrigin": "*",  
        "AllowedMethod": ["GET", "HEAD", "PUT", "POST", "DELETE"],  
        "AllowedHeader": ["*"],  
        "ExposeHeader": ["x-oss-request-id"]  还有ETag、x-oss-version-id
    }  
]

x-oss-request-id：
是一个非标准的HTTP响应头，通常是由对象存储服务（如阿里云OSS）添加的。
它代表了一个唯一的请求标识符，用于跟踪和诊断请求。如果在使用对象存储服务时遇到问题，您可以将这个ID提供给服务提供商，以便他们能够快速定位并解决问题。

x-oss-version-id：
也是一个非标准的HTTP响应头，与版本控制的对象存储服务相关。
当您在对象存储服务中启用了版本控制功能时，每次对对象的修改都会创建一个新的版本，并分配一个唯一的版本号。
x-oss-version-id头包含了与响应中返回的对象版本相对应的唯一版本号。这允许您明确知道您正在查看或操作的是哪个版本的对象

ETag：
是一个HTTP响应头，它用于验证一个资源的当前版本。它通常是一个哈希值，代表了资源的某个特定版本的状态。
当客户端请求一个资源时，它可以包含一个If-None-Match头，其中包含了它之前接收到的ETag值。如果资源自上次请求以来没有改变（即ETag值相同），服务器会返回一个304 Not Modified响应，而不是重新发送资源的内容。
ETag的主要用途是缓存验证，帮助减少不必要的网络传输。

注意：将AllowedOrigin设置为*意味着允许所有源访问。为了安全起见，你可以将其限制为具体的域名。

4.使用代理服务

如果你不能修改OSS的CORS设置，或者出于某种原因不想这样做，你可以设置一个代理服务来请求图片，并将图片作为你自己的服务器上的资源提供给前端。这样，所有的请求都会是同源的，从而避免了CORS问题。

（同源：协议、域名、端口号都相同）

解释：

想象一下，你在网上购物，你想从一家商店（目标服务器）买一件商品，但是这家商店只允许同一家商场（同源）的顾客购买。由于你来自另一家商场（不同源），你无法直接购买这件商品。这就是所谓的跨域问题。

然而，幸运的是，有一家中间商（代理服务器）愿意帮助你。这个中间商位于你和目标商店之间。你可以告诉中间商你想要买的商品，然后中间商会代替你去目标商店购买，并将商品带给你。因为中间商和目标商店在同一个商场（或者至少目标商店信任这个中间商），所以目标商店允许中间商购买商品。

这样一来，即使你原本不能直接从目标商店购买商品，通过中间商的帮助，你还是能够成功购买到商品。这就是代理服务器如何帮助避免跨域问题的原理。客户端（你）通过代理服务器（中间商）与目标服务器（目标商店）通信，绕过了浏览器对跨域请求的限制。

通过这种方式，代理服务器充当了客户端和目标服务器之间的桥梁，使得跨域请求得以成功执行。