vue反向代理ip能接端口么?
vur反向代理ip能接端口,可是前提是要通過服務代理,通過特制的信號接收器實現,這樣就能夠訪問目標地址了。
需求:項目有多個服務器地址,都需要做代理。直接把測試和正式的接口地址寫到 .env.development 和 .env,production里,通過process.env.VUE_APP_URL 這個可以獲取到你定義的接口的變量值,VUE_APP_URL 這個東西是你自定義的在.env.development這個文件里,格式為VUE_APP_名字 = " " 賦值為你的公共接口地址,這是只有一個公共接口的情況,很好處理
在vue.confing.js 里面進行代理配置我的代理api比較多 所以先生成一個對象
生成的對象
proxyTable:{ '/ems': { target: '',// 需要訪問的真實地址 changeOrigin: true,//開啟代理 ws: true, secure: false, // 如果是https接口,需要配置這個參數為true pathRewrite: { '^/ems': 'ems' } // 重定向的地址 }, '/KTTiming': { target: 'changeOrigin: true, ws: true, pathRewrite: { '^/KTTiming': '' } } } 123456789101112131415123456789101112131415
在vue.confing.js找到devServer對象 將上面生成的對象賦給 proxy
在axios請求寫url時侯直接寫.env,production文件里配置的變量名例如
我需要訪問的接口是,第一行 ‘/ems‘是一個標識,告訴它只代理接口里面有/ems這個字段的接口,我的目標服務器就是http://172.0.0.228:3103,即target定義的pathRewrite重定向‘^/ems’: ‘/ems’ 就是在代理是時候使用/api 代理,使用的時候就可以直接這樣使用。
axios.get('/ems/v1').then((res)=>{ console.log(res) }) 123123
也可以不用pathRewrite 如同KTTiming 使用時就要寫全地址后面的
axios.get('/ems/ems/v1').then((res)=>{ console.log(res) })。