Je teste notre application Angular (exécutée à http: // localhost: 4200 ) sur une instance locale de notre API basée sur Node / Express / MongoDB (que j'exécute à http: // localhost: 3000 ).
L'un des points de terminaison que je teste est utilisé pour permettre à nos utilisateurs internes de télécharger un fichier. Maintenant, sur notre URL d'API réelle, nous avons notre stratégie CORS (voir ci-dessous pour plus de détails) - et il s'agit d'une application de bureau interne exécutée derrière un VPN.
Mais lorsque j'essaie de tester cette fonctionnalité de téléchargement sur mon application locale exécutée sur une instance locale de l'API, j'obtiens ce message d'erreur:
Accès à XMLHttpRequest à « http: / /localhost:3000/v0/filegenerator/download?emailDocId=47dh385686e780c18e905&apikey=9d98e41d-44e9-4bbb-ab3d-35b7df5272dc&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJDUkVXTWVtYmVyIjoiNWmNoIjoiU2MDc0ODd9.bA5B5bx4wPSSiVCS_LxTK1gifjtif8dj29sfUBHqpOg » depuis l'origine « http: // localhost: 4200 » a été bloqué par la stratégie CORS: La réponse à la demande de contrôle en amont ne passe pas la vérification du contrôle d'accès: n'a pas le statut HTTP ok.
Quelques questions ici:
1.) S'agit-il d'un message d'erreur de sécurité Chrome générique?
2.) Est-ce que je peux changer cela désactivé, pour que je puisse tester le téléchargement du fichier? Ou puis-je uniquement tester cela en utilisant notre API en direct?
Comment puis-je contourner au mieux cela dans mon environnement de test?
Ajout d'une note: j'ai une extension CORS - " Autoriser-Contrôle-Autoriser-Origine: * 1.0.3 "- installé dans Chrome, et il est actuellement défini sur" Activer le partage de ressources cross-origin ".
De plus, sur notre environnement backend Node / Express, voici notre paramètre actuel:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
return next();
});
3 Réponses :
Il s'agit d'une fonctionnalité de sécurité générale dans les navigateurs. Vous ne pouvez pas le désactiver. Une façon de contourner ce problème est d'autoriser votre origine côté serveur, en définissant l'en-tête Access-Control-Allow-Origin . Cependant, cela ne fonctionnera pas pour les demandes de contrôle en amont (OPTIONS), si vous ne les gérez pas séparément.
Si cela n'est pas possible (en raison de bibliothèques, de services, d'authentification, etc. tiers), vous pouvez définir un proxy inverse dans Angular, qui vous permet de tunneliser toutes vos demandes. Pour le navigateur, il semble que vos requêtes soient envoyées au même domaine (et port) que votre application angulaire (et supposent donc avoir la même origine).
Créez simplement un proxy.conf.js dans votre projet comme ceci:
const path = "/proxy_path/*";
const proxy = "/proxy_path/";
const pathRewrite = {};
pathRewrite["^" + proxy.slice(0, -1)] = "";
const configs = {
target: 'your_service_url',
secure: false,
changeOrigin: true,
pathRewrite,
logLevel: "debug"
}
const PROXY_CONFIG = {};
PROXY_CONFIG[path] = configs;
module.exports = PROXY_CONFIG;
Et utilisez ng serve --host 0.0.0.0 --disable-host-check --proxy-config
J'espère que cela vous aidera!
Merci, mais voyez ce que j'ai ajouté ci-dessus. Nous avons actuellement Access-Control-Allow-Origin défini dans notre API back-end.
Je vois. Les demandes de contrôle en amont (OPTIONS) ne seront pas affectées par l'en-tête Allow-Control-Allow-Origin. Donc, la seule option que je vois est de configurer un proxy dans Angular. Je publierai bientôt un exemple à ce sujet.
Les en-têtes CORS sont essentiellement un moyen pour un serveur de dire: "Je reconnais ces autres serveurs comme des sources pour m'envoyer des requêtes, et cela devrait être sûr pour le navigateur." S'il n'y a pas d'en-tête, alors seules les demandes provenant du même serveur sont considérées comme sûres.
Vous devriez pouvoir configurer votre application locale pour ajouter un en-tête à la réponse.
L'en-tête de texte brut ressemblerait à
Contrôle d'accès-Autoriser-Origine: localhost: 4200
Merci. Un exemple concret de ce à quoi ressemblerait un tel en-tête serait utile.
D'accord, et cet en-tête de texte brut irait où?
@Muirik connaissez-vous chrome.exe --disable-web-security ? vous devez d'abord fermer tous les processus de votre navigateur Chrome, puis exécuter la commande.
@Muirik Ceci est un en-tête HTTP, la façon dont vous l'ajoutez à la réponse dépend généralement fortement des frameworks que vous utilisez pour votre serveur Node
Je suis sur un Mac, j'ai donc fermé Chrome, ouvert mon terminal et exécuté: open -a Google \ Chrome --args --disable-web-security --user-data-dir . Semblait faire l'affaire.
À des fins de test, vous pouvez utiliser l'indicateur disable-web-security de chrome.
chrome.exe --disable-web-security
Cette approche a fonctionné pour moi. Cela varie un peu en fonction de la machine sur laquelle vous vous trouvez. Je suis sur un Mac, j'ai donc fermé Chrome, ouvert mon terminal et exécuté: open -a Google \ Chrome --args --disable-web-security --user-data-dir . A travaillé pour moi.
La manière simple est que vous avez une extension chrome pour les cors afin que vous puissiez la tester, mais vous devriez mieux gérer cela, l'extension est juste une solution rapide
Dire "vous devriez mieux gérer cela" n'est pas utile car c'est trop vague. Si vous souhaitez faire ce commentaire, veuillez donner plus de détails. De plus, j'ai déjà une extension CORS dans Chrome, et elle est définie sur "Activer le partage de ressources inter-origines".
Je ne sais pas exactement ce que vous devez faire, mais vous devez le gérer quelque part sur le backend, je viens de dire que vous pouvez utiliser cette extension comme solution rapide jusqu'à ce que vous trouviez / quelqu'un propose une solution sur le backend.
Vous disposez déjà de l'extension CORS Chrome. Et je ne pense pas que vous puissiez faire quoi que ce soit "sur le backend" pour gérer cela. Je pense que c'est un problème de navigateur frontal. Sinon, des détails seraient nécessaires pour que je sache comment y remédier.
Je ne pense pas que ce soit un problème de frontend, jetez un œil à ceci: stackoverflow.com/a/55178922/5767800 . Vous autorisez généralement les cors sur le backend, donc si vous l'avez configuré correctement et que vous rencontrez toujours un problème, cela pourrait être autre chose, je suppose.
Je suis sur un Mac, j'ai donc fermé Chrome, ouvert mon terminal et exécuté:
open -a Google \ Chrome --args --disable-web-security --user-data-dir. Semblait faire l'affaire.