Résumé des problèmes et des solutions rencontrés lorsque les images Canvas traversent des domaines

Le contenu de cet article est un résumé des problèmes et des solutions rencontrés lorsque des images Canvas inter-domaines sont rencontrées. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Bien qu'il soit possible d'utiliser Canvas sans CORS Utilisez des images sur toile, mais cela polluera la toile. Une fois le canevas contaminé, vous ne pouvez plus lire ses données. Par exemple, vous ne pouvez plus utiliser les fonctions toBlob(), toDataURL() ou getImageData(), leur appel générera une erreur de sécurité. Ce mécanisme peut éviter les fuites de confidentialité des utilisateurs causées par l’extraction d’informations de sites Web distants sans autorisation.

L'image dans la spécification HTML a un attribut crossorigin Combiné avec l'en-tête de réponse CORS approprié, vous pouvez utiliser l'image de l'élément inter-domaine

crossOrigin/CORS	同域	跨域无 CORS	跨域有 CORS
default	支持	支持渲染，不支持 toDataURL	支持渲染，不支持 toDataURL
anonymous	N/A	同上	支持渲染，支持 toDataURL
use-credentials	N/A	同上	支持渲染，不支持 toDataURL

Résumé : Canvas peut restituer des images inter-domaines normalement, mais lorsque l'image inter-domaine ne définit pas d'en-tête de réponse inter-domaine ou ne définit pas crossOrigin = 'anonymous', en utilisant canvas.toDataURl lancera l'erreur suivante :

Chrome

crossOrigin non défini

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at Image.img.onload...

Cross domain

Access to Image at 'http://localhost:3001/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

crossOrigin=use-credentials set

Access to Image at 'http://localhost:3002/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access.

Safari/Firefox

crossOrigin n'est pas défini

SecurityError : L'opération n'est pas sécurisée.

Cross domain

[Error] Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin. (canvas.jpg, line 0)
[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.

corssOrigin= est défini sur les informations d'identification

[Error] Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
[Error] Failed to load resource: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true. (canvas.jpg, line 0)
[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Exemple de test

1 Démarrez le serveur

npm start : démarrez le serveur

npm run start. :corsdisable : Démarrez le serveur d'images inter-domaines

npm run start:corsable : Démarrez le serveur d'images inter-domaines-CORS

2. Visitez http://localhost:3000

Autres problèmes

1. CossOrigin a des problèmes de compatibilité

Pour les navigateurs qui ne prennent pas en charge cossOrigin (IE 10 et versions antérieures ne sont pas prises en charge, Android 4.3 et versions antérieures ne sont pas prises en charge), vous pouvez utiliser XMLHttprequest. et URL.createObjectURL() pour la compatibilité, reportez-vous à l'exemple de test Ajax pour résoudre le problème inter-domaines des images Canvas.

2. Pourquoi ne pas utiliser des images du même domaine ?

Le développement front-end d'aujourd'hui place généralement des ressources statiques sur CDN, telles que Alibaba Cloud ou Tencent Cloud Services, et il y aura un nom de domaine dédié pour accéder à ces ressources.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!