Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How img tag gets content over cors headers

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">
like image 889
Antony Avatar asked Dec 26 '17 11:12

Antony


People also ask

Does CORS apply to IMG?

The crossorigin attribute specifies that the img element supports CORS. CORS stands for Cross Origin Resource Sharing. CORS is a standard mechanism to retrieve files from a third party domain or server. If specified, the image file request will be sent with or without credentials.

How do CORS headers work?

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

What is cross origin images?

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos.


1 Answers

The cross-origin sharing standard does not include img tags, but XHR/fetch requests and some cases including drawing images to a canvas does.

For more info: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#What_requests_use_CORS

like image 121
Tamir Kfir Avatar answered Oct 13 '22 10:10

Tamir Kfir