vue項(xiàng)目設(shè)置proxy代理，客戶端或?yàn)g覽器如何去查看代理地址

在 Vue 項(xiàng)目中，通過 vue.config.js 配置的 Proxy 代理 主要用于開發(fā)環(huán)境（DevServer）解決跨域問題，代理請(qǐng)求會(huì)在本地開發(fā)服務(wù)器（如 webpack-dev-server）層面轉(zhuǎn)發(fā)，瀏覽器或客戶端無法直接看到代理后的真實(shí)請(qǐng)求地址，因?yàn)榇硎窃诜?wù)端完成的。但可以通過以下方法間接驗(yàn)證代理是否生效以及查看代理地址。

 proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: "http://xxxxxx:8080",
        changeOrigin: true,
        onProxyRes(proxyRes, response) {
          const realUrl = new URL(response.url, "http://xxxxxx:8080").href
          proxyRes.headers['x-real-url'] = realUrl
        },
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }

這樣就可以在控制臺(tái)看到


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容