Comment puis-je télécharger un site Web sous forme de chaîne avec Angular4?

Question

J'essaie de télécharger (obtenir) une page Web qui renvoie la chaîne, pas XML et pas JSON.

Fondamentalement, y at-il un moyen de télécharger une page Web sous forme de chaîne dans Angular4 comme WebClient.DownloadString en C#?

Note: Je pensais pouvoir utiliser des méthodes http (observables, promesses, JSONP) pour télécharger un site web en premier. Mais de toute façon j'ai essayé.

Je ne suis pas capable d'utiliser JSONP comme je le comprends car il analyse le résultat en tant que json et j'obtiens une erreur car la réponse est une chaîne non JSON.

Et les observables et promesses échouent parce que je reçois une erreur CORS. Et je ne suis pas sûr pourquoi je reçois une erreur CORS parce que ce n'est pas un service RESTful, WCF ou web api, etc.

Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée .

J'ai également essayé HttpClient mais j'ai encore une fois l'erreur CORS. Donc je crois qu'il devrait y avoir une autre méthode ou un autre composant ou module dans Angular pour télécharger une page web en tant que chaîne.

Answer 1

Vous pouvez utiliser un proxy CORS pour obtenir le contenu des sites qui ne pas envoyer Access-Control-Allow-Origin Voici un exemple simple:

const proxyurl = "https://cors-anywhere.herokuapp.com/"; 
 
const requesturl = "https://google.com"; 
 
fetch(proxyurl + requesturl) 
 
    .then(response => response.text()) 
 
    .then(text => document.querySelector("pre").textContent = text)

<pre></pre>

Ce qui est là ce qui se passe:

Si un site n'émet pas lui-même un en-tête de réponse Access-Control-Allow-Origin, les navigateurs bloqueront votre frontend J Le code avaScript ne peut pas accéder à la réponse de ce site lorsque vous lui faites une demande en utilisant l'API Fetch ou les méthodes XHR ou Ajax des bibliothèques JavaScript.Mais l'utilisation de l'URL https://cors-anywhere.herokuapp.com/https://google.com provoque l'obtention de la demande via https://cors-anywhere.herokuapp.com, un proxy CORS ouvert qui transmet la demande à https://google.com et reçoit ensuite la réponse de celui-ci. Le backend https://cors-anywhere.herokuapp.com ajoute l'en-tête Access-Control-Allow-Origin à la réponse et le renvoie à votre code d'application demandeur.

Le navigateur autorisera alors votre code d'accès à accéder à la réponse, car cette réponse avec l'en-tête de réponse Access-Control-Allow-Origin est ce que voit le navigateur.

Vous pouvez facilement configurer votre propre proxy CORS utilisant https://github.com/Rob--W/cors-anywhere/

Pour en savoir plus sur ce que font les navigateurs lorsque vous envoyez des demandes croisées origine de frontend code JavaScript en utilisant XHR ou l'API Fetch ou méthodes AJAX JavaScript de libraries- et des détails sur les en-têtes de réponse qui doivent être reçus pour que les navigateurs autorisent le code frontend à accéder aux réponses. Voir https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.

Answer 2

Je suis désolé, le Same Origin Policy empêche votre site de télécharger un site Web à partir d'un domaine différent. La même règle d'origine s'applique à chaque demande Web. Que ce soit un site Web ou une API REST ne fait pas de différence.

Il y a plusieurs façons de contourner la même politique Origine:

• Le serveur Web de destination peut coopérer en réglant le CORS -header Access-Control-Allow-Origin. (CORS connaissait le concept de "simple requête" comme mentionné dans les commentaires, mais cela n'est pas lié.) Une "simple requête" est une requête qui ne déclenche pas de pré-requête. à la réponse, vous avez toujours besoin de l'en-tête de réponse Access-Control-Allow-Origin).

• Vous pouvez convertir votre site Web dans une application installable ou navigateur Extension

• Vous pouvez fournir un script côté serveur sur votre domaine qui proxie la requête au domaine cible. Soyez très prudent avec cette option, car elle pourrait facilement être utilisée par des tiers à moins que vous ne preniez des mesures supplémentaires (par exemple, les destinations de liste blanche, la limitation de débit et la journalisation).