Cómo usar webpack para manejar solicitudes entre dominios
Esta vez le mostraré cómo usar webpack para manejar solicitudes entre dominios y cuáles son las precauciones para usar webpack para manejar solicitudes entre dominios. El siguiente es un caso práctico, echemos un vistazo. .
Durante la depuración front-end, el problema entre dominios siempre ha sido un problema problemático. En el artículo anterior, se analizaron algunos métodos posibles para solucionar los problemas entre dominios.
Si desea utilizar JSONP, en primer lugar, hay muchas cosas que deben modificarse y no está en línea con la tendencia general del desarrollo front-end. Si usa CORS, no existe. tipo de aplicación/json. Y lo que es más importante, esto es sólo un requisito durante la depuración del front-end, no después de que esté en línea, por lo que no es bueno tener demasiadas intrusiones en el back-end.
Entonces, de repente, un pensamiento pasó por mi mente: ¿agregar un agente no resolvería este problema? Pero lo pensé y fue bastante complicado escribirlo, así que lo dejé en espera.
Hasta hace unos días, Stone mencionó que webpack-dev-server ya lo había pensado y ya lo había implementado para nosotros.
Entonces, lo probé en un proyecto de Vue y descubrí que era realmente genial. No solo puede cargar en caliente el servidor local, sino también llamar directamente a la API remota entre dominios, lo que resolvió perfectamente todos los problemas. Me encontré antes.
A continuación, presentaré brevemente los pasos (tomando como ejemplo un proyecto de paquete web creado con andamios Vue):
Primero verifique si hay
en build/webpack. dev.conf.js p>proxy: config.dev.proxyTable, si este elemento de configuración está comentado, abra el comentario. Si no, agréguelo al objeto devServer
Luego, en. config/index.js Agregue el elemento de configuración proxyTable al objeto de desarrollo:
proxyTable: {
'/**': {
target: '' ,
changeOrigin: true,
seguro: false
}
}, la clave frontal /** significa representar todas las solicitudes , si representa algunas solicitudes, se pueden cambiar a una cadena como /api.
El siguiente objetivo es el sitio web que se va a utilizar como proxy. changeOrigin significa cambiar el campo Origen en la solicitud http. Cuando el navegador reciba la respuesta de fondo, pensará que se trata de una solicitud local. , y el backend pensará que es una llamada dentro del sitio.
De esta forma, mediante esta sencilla configuración, el problema entre dominios queda perfectamente solucionado.
Después de eso, cuando ejecute
npm run dev directamente, puede enviar la solicitud ajax en el front-end de prueba al servidor back-end para realizar pruebas.
Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.
Lectura recomendada:
Usar Js para implementar la biblioteca Promise
Cómo recortar imágenes en React