导语
在网页开发中，使用异步请求下载图片是非常常见的场景。然而，当我们尝试异步下载一些网络图片时，往往会遇到跨域限制的问题。本文将探讨为何异步下载资源会出现跨域限制，以及如何解决这个问题。
同源策略
同源策略是一种浏览器安全机制，用于防止不同源的网页之间进行恶意操作。"同源"指的是协议、域名和端口都相同。根据同源策略，文档或脚本只能与来自相同源的资源进行交互。
异步下载资源的跨域限制
当我们使用fetch等方法进行异步下载资源时，浏览器会发送一个跨域请求头 (origin) 来告知服务器请求的来源。服务器会检查该请求的来源与自身的域名是否一致。如果不一致，服务器会拒绝请求并返回跨域错误。
img标签加载图片的影响
浏览器通常会将通过img标签加载的图片缓存起来。当我们尝试通过fetch进行异步下载已经被img标签加载过的图片时，浏览器会发现该图片已经被加载过，并且标记为跨域资源。因此，浏览器会执行同源策略的限制，拒绝该跨域请求并报跨域错误。
问题：为什么当图片没被img标签加载过就没有跨域限制呢？ 当图片没有被img标签加载过，使用fetch进行跨域下载时不会报跨域错误，原因是因为浏览器在加载图片之前并不知道它是跨域资源。在这种情况下，浏览器会将fetch请求发送到服务器，并在响应中获取图片数据。由于浏览器不知道该资源是跨域资源，因此不会执行同源策略的限制，也就不会报跨域错误。
只有当图片被img标签加载过后，浏览器会将其缓存起来。当使用fetch再次对同一张图片进行跨域请求时，浏览器会发现这张图片之前已经被加载过，并且具有跨域标记。由于fetch函数会发送origin头部信息，触发了同源策略的限制，导致浏览器拒绝了这个跨域请求并报跨域错误。
总结起来，浏览器对图片的跨域请求处理方式存在差异。当图片没有被img标签加载过时，fetch请求不会触发同源策略的限制，因此可以正常进行跨域下载。而当图片已经被img标签加载过并缓存后，再次使用fetch进行跨域请求时，同源策略将会限制该请求，并报跨域错误。
解决方法
跨域资源共享（CORS） 要解决这个问题，我们可以在服务器端进行跨域资源共享（CORS）配置。以下是一些解决方法和步骤：
- 在服务器端配置CORS，允许特定域的跨域访问。
- 在响应头中添加Access-Control-Allow-Origin标头，指定允许跨域访问的域名。
其他注意事项：
- 在配置CORS时，最好只允许必要的域进行跨域访问，以保护数据安全。
- 在实际项目中，根据需要可以配置更多的CORS选项，如允许的标头、请求方法、最大缓存时间等。
结论
异步下载资源时出现跨域限制是因为浏览器执行了同源策略的限制。通过配置跨域资源共享（CORS），我们可以解决这个问题。正确配置CORS能够确保资源符合安全策略，同时允许合法的跨域访问。
