How to display Image using webUrl on localhost.

Question

Hi,

I'm having issues using "webUrl" link. I manage to make my code work with "@microsoft.graph.downloadUrl" but that take time because each image is downloaded. I'm trying not to download them to gain a lot of time.

Here come my actual code :

 return new Promise((resolve, reject) => {
          const img = new Image();
          img.crossOrigin = "anonymous";
          img.onload = () => {
            maxImageWidth = Math.max(maxImageWidth, img.width);
            totalHeight += img.height;
            resolve(img);
          };
          img.onerror = reject;
          img.src = url;
        });
      });

This is working well with "@microsoft.graph.downloadUrl" but when using webUrl i have CORS issues :

Access to image at 'https://EXEMPLE.sharepoint.com/sites/MySite/MyPath/imageExemple.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If you can please help me with this issue, i'll be grateful.

Answer 1

Bonjour Léo,

Meric d'avoir sollicité la communauté Q&A France.

La politique CORS est une mesure de sécurité qui empêche les requêtes HTTP provenant d’un domaine différent d’accéder aux ressources d’un autre domaine, à moins que le serveur ne spécifie explicitement qu’il autorise ces requêtes. Dans votre cas, le serveur hébergeant l’image ne fournit pas l’en-tête Access-Control-Allow-Origin, ce qui entraîne le blocage de l’accès depuis votre application locale.

Voici quelques solutions possibles pour résoudre ce problème :

Ajouter l’en-tête CORS côté serveur : Si vous avez accès au serveur hébergeant l’image, configurez-le pour inclure l’en-tête Access-Control-Allow-Origin dans sa réponse HTTP. Cela permettra à votre application locale d’accéder à l’image.

Utiliser un proxy CORS : Vous pouvez rediriger votre demande à travers un proxy CORS qui ajoutera l’en-tête approprié. Des extensions de navigateur telles que CORS Helper, CORS Unblock ou dyna CORS peuvent vous aider à contourner les restrictions CORS.

Changer l’origine de la requête : Si possible, modifiez l’origine de votre application locale pour qu’elle corresponde à celle autorisée par le serveur hébergeant l’image. Par exemple, si le serveur autorise ‘https://EXEMPLE.sharepoint.com’, assurez-vous que votre application locale utilise également ce domaine.

Assurez-vous également de vérifier les politiques de sécurité et les autorisations sur le serveur SharePoint où se trouve l’image. Si vous n’avez pas la possibilité de modifier la configuration du serveur, la solution du proxy CORS peut être la plus simple à mettre en œuvre.

Voici des liens forums qui traitent du sujet:

• Image blocked by CORS
• How to fix error Access to image at '....' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
• Access to Image from origin 'null' has been blocked by CORS policy

A bientôt.

Alexis

Si cette réponse a répondu à votre question, veuillez « Accepter comme réponse » et voter en utilisant « Pouce levé » afin que la pertinence de ce message s’améliore lorsque quelqu’un dans la communauté recherche une requête similaire.