Código de status do endereço da interface de solicitação de front-end 404 após proxy reverso, precauções de proxy reverso

1. Código de proxy reverso (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'
    }
  }
},

pergunta

Interface 404

2. Razões para solução de problemas

[Etapas de solução de problemas]

1. Pense nisso : precisamos primeiro ver 反向代理的真实地址onde está o endereço de solicitação da interface e depois ver se é um problema de proxy ou outros problemas;
2. Visualização de endereço reallogLevel: 'debug' : Adicione a configuração na configuração do proxy , e você pode imprimir o endereço proxy do endereço solicitado no terminal, mas adicioná-lo é inútil, o terminal não produz nada;
3. 2 Se não funcionar, encontre outras maneiras de verificar o endereço real do proxy: onProxyResAdicione a configuração do proxy ao cabeçalho da solicitação em Configuração x-real-url1para exibir o endereço real da solicitação;
   
4. O endereço proxy encontrado é /apio endereço proxy de http://192.168.0.42:9151[Pergunta 1]
5. [Solução para o Problema 1] Modifique /apio agente para ^/api(veja a explicação do Problema 1 abaixo para saber o motivo da modificação)
6. Verificou-se que o endereço do agente mudou /mon_archive_cabinetnovamente para o endereço do agente [Questão 2]
   
7. [Solução para o problema 2] Modifique o prefixo do endereço de solicitação de interface /mon_archive_cabinet_RFIDpara /RFID(ou seja, modifique o endereço de solicitação de interface /mon_archive_cabinet_RFID/api/GetCardNumpara /RFID/api/GetCardNum) e modifique o proxy reverso /mon_archive_cabinet_RFIDpara /RFID(para saber o motivo da modificação, consulte a explicação do Problema 2 abaixo)
8. Verificação [Problema 2 resolvido]
   

【Pergunta 1】 Causa

/apiO significado de proxy é: desde que o endereço da solicitação contenha/api , este proxy será usado, e outros proxies abaixo deste proxy não serão usados; o
^/apisignificado de proxy é: apenas o endereço de solicitação /apique começa com será correspondido e o resto não corresponderá
[então] modifique /apio proxy para^/api

【Pergunta 2】 Causa

Sequenciar problemas e resolver problemas iniciais

/mon_archive_cabinetProxy : O endereço da solicitação que queremos usar /mon_archive_cabinet_RFID/api/GetCardNumcontém o proxy && O início do endereço da solicitação é consistente com o proxy (correspondência difusa)&& O proxy está /mon_archive_cabinet_RFIDantes do código do proxy , portanto, o proxy é correspondido e não continua a corresponder ao proxy após o código proxy /mon_archive_cabinet_RFID[
Solução] 2 maneiras

1. Coloque /mon_archive_cabinet_RFIDo código do agente /mon_archive_cabinetantes do código do agente;
2. Modifique /mon_archive_cabinet_RFIDo nome do proxy e o endereço inicial do endereço da solicitação (a solução que usei).

[Anexo: código de solução 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. Resumo – resolvendo o 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. Resumo – proxy reverso

• Quando existem vários endereços proxy:
  1. Preste atenção se começa com determinados endereços ou contém determinados endereços;
  2. Observe que a correspondência difusa não é uma correspondência exata entre / e / no endereço correspondente;
  3. Preste atenção na ordem dos endereços de proxy para evitar que o proxy escrito no final seja priorizado pelo proxy escrito no início, causando falha na solicitação.

[Nota] Proxy reverso local e proxy reverso online

vue.config.jsO proxy reverso configurado no projeto vue front-end é útil apenas para o projeto em execução local front-end. Após a implantação online, o proxy reverso usa nginxo proxy configurado no back-end.

• vue.config.jsApós configurar proxya execução entre domínios no npm run build, se o pacote for implantado no servidor, será relatado um problema entre domínios ou solicitação de interface 404. Por que o erro foi relatado?
  • Porque após a compilação e o empacotamento, a página front-end se torna um recurso estático separado e o servidor proxy devServer.proxyé extraído.
  • Em outras palavras, devServer.proxy ele não será empacotado na pasta dist junto , então é equivalente a não configurarmos um servidor proxy! !
• Como resolver isso? Para que um recurso seja acessado, deve haver um servidor proxy para carregá-lo.
  • A maneira mais comum de implantar e ficar online é usar nginxproxy reverso. Você só precisa modificar nginxo arquivo de configuração .
• fonte