Scénarios d'applications cors inter-domaines et proxies inversés (cors cross-domain axios)

Scénarios d'applications cors inter-domaines et proxies inversés (cors cross-domain axios)

Bonjour à tous, je suis un auteur qui aime écrire. Aujourd'hui, j'aimerais vous parler des scénarios d'application cross domain cors et des reverse proxies. Peut-être que pour certains d'entre vous, ce terme n'est pas familier, mais croyez-moi, vous en aurez une meilleure compréhension grâce à mon histoire.

Domaine croisé (cors)

Tout d'abord, parlons du cross-domain (cors). Dans le monde de l'internet, chaque site web a son propre territoire, comme une île. Lorsque nous demandons des ressources d'un site (île) à un autre site (île), un problème interdomaine se produit. Ce problème est comparable à une mer infranchissable entre deux îles.

Nous pouvons imaginer que si j'ai besoin de fruits délicieux sur une île, mais qu'il n'y a pas de stand de fruits sur cette île, que dois-je faire ? À l'heure actuelle, le cross domain (cors) est comme un pont qui relie les deux îles. Il nous permet d'échanger et de partager des ressources entre différentes îles.

Dans la pratique, le cross-domain (cors) est souvent utilisé pour permettre aux applications frontales de demander des ressources dans d'autres domaines. Par exemple, lorsque notre application web a besoin de récupérer des données sur différents serveurs, nous devons utiliser le cross-domain (cors) pour réaliser cette fonction.

Exemple de code :
"`javascript
fetch('http://www.example.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error)) ;
“`
Dans le code ci-dessus, nous avons envoyé une requête GET via API fetch à l'interface API (/api/data) sous un autre domaine (http://www.example.com) et avons récupéré les données.

proxy inverse

Parlons maintenant des procurations inversées. Imaginons que nous soyons une petite rivière et que de nombreuses îles dépendent de la rivière pour obtenir les ressources dont elles ont besoin. Mais pour l'instant, les îles ne peuvent pas communiquer directement entre elles, elles ne peuvent interagir qu'avec la rivière pour achever le transfert des ressources.

Un proxy inverse est comme un petit kiosque situé au bord d'une rivière qui joue le rôle de connexion entre différentes îles. Lorsque notre demande atteint le proxy inverse, il nous aide à transmettre la demande à l'île cible et transmet la réponse que nous recevons en retour. De cette manière, nous pouvons facilement accéder à des ressources sur d'autres îles.

Dans le développement réel, le proxy inverse est généralement utilisé lorsque notre application frontale doit demander des ressources dans différents domaines, mais que nous ne pouvons pas envoyer la demande directement en raison de restrictions inter-domaines (cors). En mettant en place un proxy inverse, nous pouvons envoyer la requête à un serveur dans la même source, et le serveur nous aidera à la transmettre au domaine cible.

Exemple de code :
"`javascript
// Configurer le proxy inverse dans vue.config.js
module.exports = {
devServer : {
proxy : {
'/api' : {
cible : "http://www.example.com",
changeOrigin : true,
pathRewrite : {
'^/api' : "
}
}
}
}
};
“`
Dans le code ci-dessus, nous avons utilisé la fonctionnalité de configuration de proxy fournie par le CLI de Vue. En transférant les requêtes sous le chemin `/api` vers le domaine `http://www.example.com` et en supprimant le chemin `/api` en même temps, nous avons implémenté un proxy inverse simple.

remarques finales

Dans l'article d'aujourd'hui, nous avons appris à connaître les scénarios d'application inter-domaines (cors) et les proxys inversés. Le cross-domain (cors) est comme un pont qui relie différents sites web et nous permet de partager librement des ressources dans le monde de l'internet. Les proxys inversés, quant à eux, sont comme un kiosque situé au bord d'une rivière qui nous aide à connecter les ressources de différents domaines.

En pratique, nous pouvons utiliser le cross domain (cors) et le reverse proxy pour résoudre le problème des applications frontales qui doivent accéder à des ressources sous différents noms de domaine. Il s'agit d'une partie importante de notre boîte à outils de développement, dont il faut comprendre les principes et l'utilisation.

J'espère qu'à travers l'histoire d'aujourd'hui, vous avez acquis une meilleure compréhension du cross-domain (cors) et des reverse proxies. Puissiez-vous aller de plus en plus loin sur la route du développement front-end et créer de plus belles îles et kiosques ! Merci à tous !