img标签如何通过cors标头获取内容

Posted 2021-04-19

为什么当我使用fetch从服务器加载带有禁用响应CORS头的数据时，我预计会出错： Failed to load http://www.imgworlds.com/wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63343' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 但是提出了来自img标签的图像

<script>
    fetch('http://www.imgworlds.com/wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg').then(console.log);
</script>
<img src="http://www.imgworlds.com/wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg">

答案

跨源共享标准不包括img标签，但XHR / fetch请求和某些情况包括将图像绘制到画布上。

欲了解更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#What_requests_use_CORS