Escenarios de aplicación de cors entre dominios y proxies inversos (cors cross-domain axios)

Hola a todos, soy un autor al que le encanta escribir. Hoy, me gustaría hablar con usted acerca de los escenarios de aplicación cross domain cors y proxies inversos. Tal vez para algunos de ustedes, este término suena poco familiar, pero confía en mí, que sin duda tendrá una mejor comprensión de ellos a través de mi historia.

Dominio cruzado (cors)

En primer lugar, hablemos de cross-domain (cors). En el mundo de Internet, cada sitio web tiene su propio territorio, como una isla. Cuando solicitamos recursos de un sitio (isla) a otro sitio (isla), se produce un problema de cross-domain. Y este problema es como un mar infranqueable entre dos islas.

Podemos imaginar que si necesito conseguir frutas deliciosas en una isla, pero no hay ningún puesto de frutas en esta isla, ¿qué debo hacer? En este momento, el dominio cruzado (cors) es como un puente que conecta las dos islas. Nos permite intercambiar y compartir recursos entre distintas islas.

En la práctica, cross-domain (cors) se utiliza a menudo para permitir a las aplicaciones front-end solicitar recursos bajo otros dominios. Por ejemplo, cuando nuestra aplicación web necesita obtener datos de diferentes servidores, necesitamos utilizar cross-domain (cors) para lograr esta función.

Código de ejemplo:
"`javascript
fetch('http://www.example.com/api/data')
.then(respuesta => respuesta.json())
.then(datos => console.log(datos))
.catch(error => console.log(error));
“`
En el código anterior, enviamos una solicitud GET a través de fetch API a la interfaz API (/api/data) bajo otro dominio (http://www.example.com) y obtuvimos los datos de ella.

proxy inverso

Bien, hablemos ahora de los proxies inversos. Imaginemos que somos un pequeño río, y muchas islas dependen del río para obtener los recursos que necesitan. Pero en este momento, las islas no pueden comunicarse directamente entre sí, sólo pueden interactuar con el río para completar la transferencia de recursos.

Un proxy inverso es como un pequeño quiosco situado en la orilla de un río que desempeña la función de conectar diferentes islas. Cuando nuestra petición llega al proxy inverso, éste nos ayuda a reenviar la petición a la isla de destino y reenvía la respuesta que obtenemos de vuelta. De este modo, podemos acceder fácilmente a los recursos de otras islas.

En el desarrollo real, el proxy inverso se utiliza normalmente cuando nuestra aplicación front-end necesita solicitar recursos bajo diferentes dominios, pero debido a restricciones entre dominios (cors), no podemos enviar peticiones directamente. Configurando un proxy inverso, podemos enviar la petición al mismo servidor de origen, que nos ayudará a reenviarla al dominio de destino.

Código de ejemplo:
"`javascript
// Configurar el proxy inverso en vue.config.js
module.exports = {
devServidor: {
proxy: {
'/api': {
objetivo: 'http://www.example.com',
changeOrigin: true,
reescribir ruta: {
^/api': "
}
}
}
}
};
“`
En el código anterior, hemos utilizado la funcionalidad de configuración de proxy proporcionada por la CLI de Vue. Al reenviar las peticiones bajo la ruta `/api` al dominio `http://www.example.com` y eliminar la ruta `/api` al mismo tiempo, hemos implementado un proxy inverso simple.

observaciones finales

A través de la historia de hoy, hemos aprendido sobre los escenarios de aplicación de dominio cruzado (cors) y los proxies inversos. Cross-domain (cors) es como un puente que conecta diferentes sitios web, nos permite compartir recursos libremente en el mundo de Internet. Los proxies inversos, por su parte, son como un quiosco situado a la orilla de un río que nos ayuda a conectar recursos de distintos dominios.

En la práctica, podemos utilizar cross domain (cors) y proxy inverso para resolver el problema de las aplicaciones front-end para acceder a recursos bajo diferentes nombres de dominio. Son una parte importante de nuestro conjunto de herramientas de desarrollo, necesitamos entender sus principios y su uso.

Espero que a través de la historia de hoy, hayas adquirido una mejor comprensión de cross domain (cors) y proxies inversos. ¡Que lleguéis cada vez más lejos en el camino del desarrollo front-end y creéis islas y quioscos más bonitos! Gracias a todos.