Question

当图像在<代码><img> 弧属性时发送的,为什么没有发出交叉面面图像申请。

Page is hosted at host1.mydomain.net.
Images are hosted at host2.mydomain.net.
There are cookies on host2.mydomain.net.

CORS 图像头目:

access-control-allow-origin: https://host1.mydomain.net
access-control-allow-credentials: true

    <style>
        #imagemask {
            mask-image: url("https://host2.mydomain.net/images/imagemask.png");
        }
    
    </style>
    
    
    <div id="imagemask"></div>
    <img src="https://host2.mydomain.net/images/image.png" />

Both image requests have Sec-Fetch-Site: same-site
The request for image.png has Sec-Fetch-Mode: no-cors and sends the cookie.
The request for imagemask.png has Sec-Fetch-Mode: cors and does not send the cookie.

Answer 1

You can use attribute crossorigin in <img> tag (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#crossorigin) to enable CORS request that is same as the url() made.

Default <img> tag is non-CORS request, so Sec-Fetch-Mode。

友情链接