prefacio

Este artículo presenta brevemente las funciones de vue proxy y nginx proxy y las precauciones de uso, y resuelve la confusión 404 que aparecen los recién llegados al front-end cuando usan vue para desarrollar y llamar interfaces localmente e implementarlas en línea. Si está interesado en los puntos de conocimiento presentados en el artículo (nginx, http-proxy, código fuente de vite, etc.), puede visitar el sitio web oficial para aprender.

1. ¿Qué es un agente? ¿Por qué usar un proxy?

¿Qué es un proxy?
Un proxy es un método de acceso indirecto para acceder a otro servicio de red a través de un servicio de red especial. Por ejemplo, no podemos acceder directamente a sitios web extranjeros, solo podemos usar VPN, es decir, usamos un proxy.
¿Por qué usar un proxy en el front-end?
En primer lugar aclarar los siguientes dos conceptos
(1) Para poder acceder a la aplicación front-end, se debe colocar en el servidor (el servidor puede ser nginx, nodejs, apache, tomcat, etc.), como nuestro local El desarrollo de Vue es iniciar un servicio con nodejs.
(2) Debido a la política del mismo origen del navegador (protocolo, ip y número de puerto son los mismos que el mismo origen), los sitios web tienen prohibido enviar solicitudes asincrónicas ajax a servidores que no sean del mismo origen, es decir, cruce -dominio.
Después de comprender los dos puntos anteriores, sabemos que nuestro desarrollo local necesita llamar a la interfaz del servidor y cruzará dominios. Hay muchas formas de resolver dominios cruzados, como cors, jsonp, etc., pero todas tienen defectos. Proxy es el medio definitivo para que el front-end resuelva dominios cruzados.

2. El uso de agentes

configuración del proxy vue

La configuración de proxy de vuecli3 se establece en vue.config.js->devServer->proxy.
La configuración de proxy de vue creada por vite se establece en vite.config.js->server->proxy.
Sus configuraciones de proxy son las mismas. Aquí tomamos vuecli3 como ejemplo.

const REQUEST_PRE = "/api"
module.exports = {
    
    
	// 其他配置省略
	
	// 本地代理配置
	devServer: {
    
    
		// 默认是false，可以将http://localhost:8080 变为 https://localhost:8080
        https: true,
        // 代理配置
        proxy: {
    
    
        	// 简单写法
        	// 当访问http://localhost:80/normal/getData
        	// 实际上访问的是 http://localhost:80/normal/getData
        	"/normal"：'http://localhost:80',
        	"/normal":{
    
    
        		target: 'http://localhost:80',
        		ws: true,  // 允许websocket代理
                changeOrigin: true //允许跨域
        	},
        	// 变量写法
            [REQUEST_PRE]: {
    
    
                target: 'http://localhost:88',
                ws: true,
                changeOrigin: true
            },
            // 重写，当访问http://localhost:80/req/getData
            // 实际上访问的是 http://localhost:8888/getData
            '/req': {
    
    
                target: 'http://localhost:8888',
                pathRewrite: path => path.replace('/req', '/module'),
                ws: true,
                changeOrigin: true
            },
            // 试试看下面两个会被代理到哪去
            '/api/normal'： 'http://localhost:8888'，
            '/api/other'： 'http://localhost:8888'，
        },
        open: true
    }
}

Nota (pit point):
1. Las siguientes barras invertidas deben ser consistentes. Aunque no tiene efecto en la llamada de la interfaz, sí tiene efecto en la ruta relativa del archivo proxy. Por ejemplo, /req, el objetivo debe
escribir http: //localhost:8888,
como /req/, el destino escribe http://localhost:8888/ 2. Independientemente de si es vuecli o
vite, el proxy con el mismo prefijo tiene una secuencia y solo la anterior tiene efecto Por ejemplo, cuando
llama a localhost:8080/api/other/getData
Will proxy a 8888


'/api': 'http://localhost:8888',
'/api/other': 'http://localhost:88'

El siguiente método de escritura representará 88


'/api/other': 'http://localhost:88',
'/api': 'http://localhost:8888'

llamada de interfaz

const REQUEST_PRE = '/api'
axios.get({
    
    
	url: `${
      
      REQUEST_PRE}/getData`
}).then(res=>{
    
    
	console.log(res)
})

proxy nginx

La mayoría de los servidores front-end ahora usan nginx. Si es Tomcat u otros, debe configurar el prefijo del proxy back-end. La configuración
simple de nginx.conf es la siguiente. El proxy solo mira la parte del servidor. Si hay muchos incluidos, debe preguntar si hay otros prefijos comunes

worker_processes  1;
error_log  logs/error.log;
events {
    
    
    worker_connections  1024;
}

http {
    
    
    include       mime.types;
    default_type  text/html;

    access_log  logs/access.log  main;

    sendfile        on;
    keepalive_timeout  65;
    gzip  on;
    server {
    
    
        listen       80;
        server_name  localhost;
        # 前端文件的地址，默认在nginx的html文件夹中找index.html
        location / {
    
    
            root   html;
            index  index.html index.htm;
        }
        # 直接代理到域名
        location /api/ {
    
    
            proxy_pass https://www.baidu.com/;
        }
 		# 代理前缀也可以加在域名上
        location /req/ {
    
    
            proxy_pass https://www.baidu.com/req/;
        }
        # nginx是全匹配，不会受前面的/req跟/api影响
        location /req/api/ {
    
    
            proxy_pass https://127.0.0.1:443/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
    
    
            root   html;
        }
    }
}

Tenga especial cuidado con la barra invertida detrás de location y proxy_pass, si comete un error, será 404.
Por ejemplo, al acceder a localhos:8080/api/getData,
ubicación /api ---- esta es una forma incorrecta de escribir.
De hecho, lo que se accede es https://www.baidu.com//getData - hay una barra invertida adicional en la
ubicación central / api/
en realidad visite https://www.baidu.com/getData
proxy_pass https://www.baidu.com
en realidad visite https://www.baidu.com/api/getData
proxy_pass https :/ /www.baidu.com/
en realidad está visitando https://www.baidu.com/getData

ps: 可刑的小知识
Un proxy no es solo una interfaz de proxy, también puede enviar páginas directamente a los sitios web de otras personas. Luego, si tiene un servidor al que se puede acceder tanto desde la red interna como desde la externa, puede usar proxy en la intranet de la empresa.
También puede disfrazar su sitio web como el sitio web de otra persona, y puede ver las contraseñas de las cuentas de otras personas en el registro de nginx, por lo que es mejor cifrar la transmisión de la contraseña de front-end.

Tres, 404 problema de posicionamiento

Simplemente entendiendo el proxy de vue y el proxy de nginx, ¿a qué se debe prestar atención al acceder correctamente a la interfaz de back-end?
1. ¿Desea mantener el prefijo, ya sea que la ruta de acceso local Rewrite se pueda escribir o no, y la configuración de proxy_pass en nginx también debe ser correspondiente? 2. ¿Los prefijos
locales corresponden a la ubicación de nginx?
Barra invertida
4. Si el servidor no está usando nginx, también puede preguntar cuál es el prefijo común del
backend.Si
el backend no está implementado o el enlace es incorrecto, simplemente rocíelo directamente

4. Sobre la secuencia del proxy Vue

Independientemente de si es vite o vuecli, si observa el código fuente, encontrará que se usa http-proxy, y http-proxy usa Object.keys().map() para recorrer los elementos de configuración para iniciar el proxy servicio, y no hay comparación de la integridad del prefijo. Es decir, si el agente anterior lo ha capturado, da igual que haya un prefijo de agente más completo detrás.
Parte del código fuente de http-proxy es el siguiente, si está interesado, puede estudiar el código fuente completo usted mismo

this.webPasses = Object.keys(web).map(function(pass) {
    
    
    return web[pass];
});

pd: al principio, miré directamente el código de vite en node_mouldes y descubrí que estaba empaquetado (es por eso que vite es más rápido), pensé que era vite quien escribió un proxy, fui a github para descargar el código fuente, y descubrió que usaba http -proxy, todavía necesita un buen estudio

Análisis de proxy front-end