vue-cli 跨域proxyTable 中的pathRewrite配置


module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {  //只能在開發環境下進行跨域,上線要進行反向代理nginx設置
      '/appstore': {
        target: 'ip:port', //后端接口地址
        changeOrigin: true, //是否允許跨越
        pathRewrite: {
            '^/appstore': '/appstore', //重寫,

//這里的配置是正則表達式,以/appstore開頭的將會被用‘/appstore’替換掉,假如后台文檔的接口是 /appstore/list/xxx
            //前端api接口寫:axios.get('/appstore/list/xxx') , 被處理之后實際訪問的是:ip:port/appstore/list/xxx
        }
      }
    },
}
'^/appstore': '',  這種接口配置出來 ip:port/login
'^/appstore': '/appstore',  這種接口配置出來 ip:port/appstore/login

注:設置proxyTable代理 在vue-cli構建項目后生成的開發環境下,直接修改config/index.js文件
proxyTable 中的 '/appstore'代表什么意思?
答:首先用代理就要有個標識,告訴它這個連接要用代理,不然的話,一些html、css、js靜態資源都跑去代理,我們的目的是跨域時接口使用代理,靜態文件用本地加載
'/appstore':{}告訴node,接口只要是'/appstore'開頭的才用代理,所以接口就要寫成/appstore/xx/xx,最后的路徑就是ip:port/appstore/xx/xx
如果接口中沒有appstore字段,那就用'^/appstore': '', 最后的路徑就會變成ip:port/xx/xx



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM