img标签如何通过cors标头获取内容 [英] How img tag gets content over cors headers
问题描述
为什么当我使用fetch来从具有禁用的CORS响应头的服务器上加载数据时,预计会出现错误:
无法加载http:/ /www.imgworlds.com/wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg:所请求的资源上没有 Access-Control-Allow-Origin标头。因此,不允许访问来源 http:// localhost:63343。如果不透明的响应满足您的需求,请将请求的模式设置为 no-cors,以在禁用CORS的情况下获取资源。
但是显示了img标签中的图像
Why, when I use fetch, to load the data from the server with disabled response CORS headers, I'v expectedly got an error:
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.
But image from img tag is presented
<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请求以及某些情况(包括将图像绘制到画布)确实可以。
The cross-origin sharing standard does not include img
tags, but XHR/fetch requests and some cases including drawing images to a canvas does.
有关更多信息:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS#What_requests_use_CORS
这篇关于img标签如何通过cors标头获取内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!