Introducción a la construcción de dist empaquetado.
El directorio dist es un directorio que contiene código de proyecto empaquetado y dependencias relacionadas, que se utiliza para portar el proyecto a otros entornos durante la implementación. Proporciona una estructura de archivos organizada y simplificada, lo que hace que el proceso de implementación sea más conveniente y confiable.
Si abre el informe de error directamente, estará en blanco, puede usar nginx para iniciarlo. Sitio web oficial de Nginx: Descargar noticias de nginx es rápido y conveniente. No necesita configurar el entorno. Puede ingresar directamente a la carpeta nginx como administrador de terminal para iniciar el proyecto de inicio de nginx, pero simplemente debe configurar el archivo de inicio nginx. .conf.
Situación 1. Problema de la interfaz 405:
Según la situación, en el proyecto iniciado, no hay ningún problema con la interfaz y el encabezado de solicitud se agrega por completo. Los requisitos de transmisión de parámetros también están de acuerdo con los requisitos del servidor. Sin embargo, cuando el archivo dist generado por el paquete de compilación se ejecuta en nignx, la interfaz informa el error 405.
Si ocurre este problema, debe configurar la interfaz en el archivo nginx.conf en la carpeta conf de nginx.
Agregue el siguiente código a la ubicación correspondiente en el servidor:
proxy_set_header Host app.dtuip.com;
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 X-Real-IP 头字段。它将客户端的真实 IP 地址（即发起请求的用户的 IP 地址）作为值传递给后端服务器。
proxy_set_header X-Real-IP $remote_addr;
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 X-Real-IP 头字段。它将客户端的真实 IP 地址（即发起请求的用户的 IP 地址）作为值传递给后端服务器。
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 X-Forwarded-For 头字段。它将包含了请求经过的所有代理服务器的 IP 地址，并以逗号分隔的形式传递给后端服务器。这个字段可以用于追踪请求的路由路径。
proxy_set_header REMOTE-HOST $remote_addr;
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 REMOTE-HOST 头字段。它将客户端的 IP 地址作为值传递给后端服务器。请注意，REMOTE-HOST 这个头字段并不是标准的 HTTP 头字段，而是一种自定义的头字段。
proxy_set_header Upgrade $http_upgrade;(可忽略)
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 Upgrade 头字段。它将客户端发送的 Upgrade 头字段的值原样传递给后端服务器。这个头字段通常用于支持 WebSocket 连接升级。Todas las rutas de proxy de interfaz en mi desarrollo front-end comienzan con /api, por lo que el código que completé aquí es el siguiente:
Si encuentra un error de nginx, verifique el registro de error específico en el archivo de registro logs/error.log.
server {
listen 5173; //监听端口，访问端口，填写自己想要的端口号
//服务器的域名或主机名称。默认都是不需要更改的
server_name localhost;
// 必要，一般只需要更改第一个路径。
location / {
root index_html/dist; // 请求将会在该目录中查找文件。
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
//重点接口配置 ！！！
location ^~ /api/ {
proxy_pass https://app.dtuip.com/; //这个地址是我的绝对地址，按需替换成自己的
proxy_set_header Host app.dtuip.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Upgrade $http_upgrade;
}
}Una vez completada la configuración, la solicitud de interfaz debería poder resolver el problema 405.
Si esta configuración aún no funciona, considere los siguientes aspectos: ① Asegúrese de que el archivo de configuración de Nginx establezca correctamente los métodos de solicitud permitidos. De forma predeterminada, Nginx habilita los métodos GET y HEAD, y otros métodos requieren configuración manual. Asegúrese de que su archivo de configuración incluya la directiva enable o la directiva proxy_pass o fastcgi_pass correspondiente. ② Compruebe si el usuario que ejecuta Nginx tiene permisos suficientes para ejecutar el método solicitado. Confirme que el usuario de Nginx tenga los derechos de acceso adecuados a los archivos y directorios relevantes. ③Si su Nginx está configurado con políticas de seguridad, como mod_security o WAF (Web Application Firewall), pueden restringir ciertos métodos de solicitud. En este caso, debe actualizar la política de seguridad o ajustar las reglas para permitir el método de solicitud requerido. ④La aplicación back-end puede devolver un error 405; comuníquese con el servidor.
Situación 2: Problema de la interfaz 401.
Según la situación, cuando el código se inicia localmente, no hay ningún problema con la interfaz. Cuando el archivo dist generado por el paquete de compilación se ejecuta en nginx, la interfaz informa un error 401.
Instrucciones a considerar: ① Error en la transferencia de parámetros de la interfaz. ② dist es un archivo estático, lo que puede impedirle enviar solicitudes por correo postal. ③ Hay problemas con el entorno de la interfaz, lo que significa que cuando la configuración del firewall es incorrecta o la configuración de las reglas es demasiado estricta, la interfaz puede devolver un error 401. Hay cuatro direcciones específicas: 1. Control de acceso: Los cortafuegos pueden restringir las solicitudes de red entrantes y salientes. 2. Filtrado de solicitudes: algunos firewalls admiten una inspección profunda de paquetes del contenido de la solicitud para evitar solicitudes y ataques maliciosos. 3. Bloquear los servicios de autenticación: algunos firewalls pueden bloquear la comunicación con los servicios de autenticación (como LDAP, Active Directory, etc.), lo que hace que la interfaz no pueda completar el proceso de autenticación y devuelva un error 401. 4. Detección SSL/TLS: algunos firewalls avanzados admiten la función de detección SSL/TLS para inspeccionar y controlar el tráfico cifrado.
solución:
①Compruebe cuidadosamente sus propios problemas de transmisión de parámetros.
② Si la solicitud de publicación no se puede enviar debido al archivo estático, puede intentar resolver el problema transfiriendo al enlace existente. La página html estática de nginx recibe la solicitud de publicación e informa un error 405 no permitido: espacio personal de Xia Lu Dongzang - OSCHINA - Comunidad china de intercambio de tecnología de código abierto
③Intenta apagar tu firewall.
Si lo anterior aún no puede resolver su problema, tenga en cuenta que nginx tiene un caché, debe limpiarlo y reiniciarlo después de realizar cambios. O cambie el entorno para ejecutar su código más reciente y ver si hay nuevos efectos milagrosos. Cuando resuelvo los problemas 405 y 401 aquí, he estado usando la computadora de la compañía y el problema no se ha resuelto. Cuando regresé a casa en el fin de semana, cuando lo ejecuto en mi propia computadora, funciona con el mismo código y la misma configuración, por lo que al resolver problemas, debes recordar tener múltiples entornos para detectar tu código. ! !