Código de estado de dirección de interfaz de solicitud de front-end 404 después del proxy inverso, precauciones para el proxy inverso

1. Código de proxy inverso (problemático)

接口封装

export function GetCardNum() {
    
    
  return request({
    
    
    url: '/mon_archive_cabinet_RFID/api/GetCardNum'
  })
}

代理配置

// webpack-dev-server 相关配置
devServer: {
    
    
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  open: true, // 自动打开浏览器
  proxy: {
    
    
    // ...
    '/api': {
    
    
      ws: false, // proxy websockets
      target: 'http://192.168.0.42:9151',
      pathRewrite: {
    
     '^/api': '' },
    },
    // ...
    '/mon_archive_cabinet': {
    
    
      target: 'http://192.168.0.26:9577',
    },
    '/mon_archive_cabinet_RFID': {
    
     // 【主要代码】代理代码
      target: 'http://localhost:5001',
      pathRewrite: {
    
     '^/mon_archive_cabinet_RFID': '' }
    },
    '/': {
    
    
      target: 'http://192.168.0.42:9000'
    }
  }
},

pregunta

Interfaz 404

2. Razones para solucionar problemas

[Pasos para la solución de problemas]

1. Piénselo : primero debemos ver 反向代理的真实地址dónde está la dirección de solicitud de la interfaz y luego ver si se trata de un problema de proxy u otros problemas;
2. Vista de dirección reallogLevel: 'debug' : agregue la configuración en la configuración del proxy y podrá imprimir la dirección del proxy de la dirección solicitada en el terminal, pero agregarla es inútil, el terminal no genera nada;
3. 2 Si no funciona, busque otras formas de verificar la dirección real del proxy: onProxyResagregue la configuración del proxy al encabezado de la solicitud en Configuración x-real-url1para mostrar la dirección de solicitud real;
   
4. La dirección de proxy encontrada es /apila dirección de proxy de http://192.168.0.42:9151[Pregunta 1]
5. [Solución al problema 1] Modificar /apiel agente para ^/api(consulte la explicación del problema 1 a continuación para conocer el motivo de la modificación)
6. Se descubrió que la dirección del agente cambió /mon_archive_cabinetnuevamente a la dirección del agente [Pregunta 2]
   
7. [Solución al problema 2] Modifique el prefijo de la dirección de solicitud de interfaz /mon_archive_cabinet_RFIDa /RFID(es decir, modifique la dirección de solicitud de interfaz /mon_archive_cabinet_RFID/api/GetCardNuma /RFID/api/GetCardNum) y modifique el proxy inverso /mon_archive_cabinet_RFIDa /RFID(para conocer el motivo de la modificación, consulte la explicación del problema 2 a continuación)
8. Verificación [Problema 2 resuelto]
   

【Pregunta 1】Causa

/apiEl significado de proxy es: siempre que la dirección de solicitud contenga/api , se usará este proxy y no se usarán otros proxy debajo de este proxy; el
^/apisignificado de proxy es: solo coincidirá con la dirección de solicitud /apique comienza con y el resto no coincidirá
[así que] modifique /apiel proxy para^/api

【Pregunta 2】Causa

Secuenciar problemas y abordar problemas iniciales.

/mon_archive_cabinetProxy : la dirección de solicitud que queremos usar /mon_archive_cabinet_RFID/api/GetCardNumcontiene el proxy && El comienzo de la dirección de solicitud es consistente con el proxy (coincidencia aproximada) && El proxy está /mon_archive_cabinet_RFIDantes del código del proxy , por lo que el proxy coincide y no continúa coincidiendo con el proxy. después del código proxy /mon_archive_cabinet_RFID[
Solución] 2 formas

1. Coloque /mon_archive_cabinet_RFIDel código de agente /mon_archive_cabinetantes del código de agente;
2. Modifique /mon_archive_cabinet_RFIDel nombre del proxy y la dirección inicial de la dirección de solicitud (la solución que utilicé).

[Adjunto: código de solución de problemas]

代理配置 - 排查问题原因

devServer: {
    
    
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  open: true, // 自动打开浏览器
  proxy: {
    
    
    // ...
    // '/api': {
    
    
    '^/api': {
    
    
      ws: false, // proxy websockets
      target: 'http://192.168.0.42:9151',
      pathRewrite: {
    
     '^/api': '' },

      changeOrigin: true,
      logLevel: 'debug', // 该代码可在控制台输出代理的真实地址 - 但是我的就没有
      onProxyRes(proxyRes, req, res) {
    
    
        console.log('req.url----api----', req.url) // 会在终端打印出当前请求地址 - 不加域名的请求地址
        // 增加代理的真实地址
        const realUrl = new URL(req.url || '', 'http://192.168.0.42:9151' || '')
        proxyRes.headers['x-real-url1'] = realUrl // 在请求头添加 x-real-url1 字段，展示实际请求的地址 - 代理之后地址
      }
    },
    // ...
    '/mon_archive_cabinet': {
    
    
      target: 'http://192.168.0.26:9577',

      changeOrigin: true,
      logLevel: 'debug', // 该代码可在控制台输出代理的真实地址 - 但是我的就没有
      onProxyRes(proxyRes, req, res) {
    
    
        console.log('req.url----mon_archive_cabinet----', req.url) // 会在终端打印出当前请求地址 - 不加域名的请求地址
        // 增加代理的真实地址
        const realUrl = new URL(req.url || '', 'http://192.168.0.26:9577' || '')
        proxyRes.headers['x-real-url1'] = realUrl // 在请求头添加 x-real-url1 字段，展示实际请求的地址 - 代理之后地址
      }
    },
    // '/mon_archive_cabinet_RFID': { // 会和 /mon_archive_cabinet 代理冲突
    '^/RFID': {
    
    
      target: 'http://localhost:5001',
      changeOrigin: true,
      logLevel: 'debug', // 该代码可在控制台输出代理的真实地址 - 但是我的就没有
      onProxyRes(proxyRes, req, res) {
    
    
        console.log('req.url---RFID-----', req.url) // 会在终端打印出当前请求地址 - 不加域名的请求地址
        // 增加代理的真实地址
        const realUrl = new URL(req.url || '', 'http://localhost:5001' || '')
        proxyRes.headers['x-real-url1'] = realUrl // 在请求头添加 x-real-url1 字段，展示实际请求的地址 - 代理之后地址
      },
      // pathRewrite: { '^/mon_archive_cabinet_RFID': '' }
      pathRewrite: {
    
     '^/RFID': '' } // 实际请求中请求地址不会加 /RFID
    },
    '/': {
    
    
      target: 'http://192.168.0.42:9000'
    }
  }
},

3. Resumen: resolución del código

接口封装

export function GetCardNum() {
    
    
  return request({
    
    
    // url: 'http://192.168.10.106:5001/api/GetCardNum' // 本地ip
    // url: 'http://localhost:5001/api/GetCardNum' // 测试接口时接口地址
    // url: '/mon_archive_cabinet_RFID/api/GetCardNum' // 接口地址添加反向代理地址头（不用 - 因为会和 /mon_archive_cabinet 代理冲突）
    url: '/RFID/api/GetCardNum' // 接口地址添加反向代理地址头
    // url: '/mon_archive_cabinet/api/GetCardNum' // 排查问题时借用 /mon_archive_cabinet 地址头
  })
}

代理配置

devServer: {
    
    
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  open: true, // 自动打开浏览器
  proxy: {
    
    
    // ...
    '^/api': {
    
     // 【解决问题主要代码】添加 ^ 表示以 /api 开头的地址代理到此处；不加 ^ 则只要地址里有 /api 就可代理此处，代理此处后则此处以下的代码将不会被代理到
      ws: false, // proxy websockets
      target: 'http://192.168.0.42:9151',
      pathRewrite: {
    
     '^/api': '' },
    },
    // ...
    '/mon_archive_cabinet': {
    
    
      target: 'http://192.168.0.26:9577',
    },
    // '/mon_archive_cabinet_RFID': { // 会和 /mon_archive_cabinet 代理冲突，所以不用
    '^/RFID': {
    
    
      target: 'http://localhost:5001',
      // changeOrigin: true, // 默认是 true
      // pathRewrite: { '^/mon_archive_cabinet_RFID': '' }
      pathRewrite: {
    
     '^/RFID': '' }
    },
    '/': {
    
    
      target: 'http://192.168.0.42:9000'
    }
  }
},

4. Resumen: proxy inverso

• Cuando hay varias direcciones de proxy:
  1. Preste atención a si comienza con determinadas direcciones o contiene determinadas direcciones;
  2. Tenga en cuenta que la coincidencia aproximada no es una coincidencia exacta entre / y / en la dirección coincidente;
  3. Preste atención al orden de las direcciones del proxy para evitar que el proxy escrito al final tenga prioridad sobre el proxy escrito al principio, lo que provocará que la solicitud falle.

[Nota] Proxy inverso local y proxy inverso en línea

vue.config.jsEl proxy inverso configurado en el proyecto vue front-end solo es útil para el proyecto en ejecución local del front-end. Después de la implementación en línea, el proxy inverso utiliza nginxel proxy configurado en el backend.

• vue.config.jsDespués de configurar proxyla ejecución entre dominios en npm run build, si el paquete se implementa en el servidor, se informará un problema entre dominios o una solicitud de interfaz 404. ¿Por qué se informa el error?
  • Porque después de la compilación y el empaquetado, la página de inicio se convierte en un recurso estático separado y devServer.proxyse extrae el servidor proxy.
  • En otras palabras, devServer.proxy no se empaquetarán juntos en la carpeta dist , por lo que equivale a que no configuremos un servidor proxy. !
• ¿Cómo resolverlo? Para poder acceder a un recurso, debe haber un servidor proxy para cargarlo.
  • La forma más común de implementar y conectarnos es utilizar nginxun proxy inverso, solo necesita modificar nginxel archivo de configuración .
• fuente