基于 vue-cli 的反向代理設(shè)置及 axios 獲取 json 數(shù)據(jù)
vue-cli 反向代理設(shè)置
- 反向代理用來解決前端跨域問題糖赔，設(shè)置很簡單滔驾，在 vue-cli 項目的 config 文件夾 index.js 文件下進(jìn)行如下設(shè)置即可：
proxyTable: {
// 代理規(guī)則
'/api': { // 配置的url請求名字開頭
// 代理的目標(biāo)服務(wù)器地址,這個路徑是我代理到服務(wù)器,即你要請求的第三方接口
target: 'http://10.18.110.107',
// https請求需要該設(shè)置
secure: false,
// 開啟代理：在本地會創(chuàng)建一個虛擬服務(wù)端康愤，然后發(fā)送請求的數(shù)據(jù)秩仆，并同時接收請求的數(shù)據(jù)操漠，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會有跨域問題
// 必須設(shè)置該項
changeOrigin: true,
// 將 '/api' 替換成 ''
// 重寫路徑運行后就代理到對應(yīng)的地址
pathRewrite: { "^/api": "" }
}
}
配置完成重新運行dev，即可請求數(shù)據(jù)
axios.get('/api/tasktime')
.then(function (res) {
console.log(res)
})
http請求本來是
axios.get('http://10.18.110.107/tasktime',{params:{num:12})就可以寫成
axios.get('/api/tasktime',{params:{num:12})實現(xiàn)跨域
![]()
1.png
1.png
