Vue專案中解決axios請求跨域問題(第三方介面)
阿新 • • 發佈:2018-11-07
先引入axios
在命令列輸入 npm i axios
然後再引入 import axios from 'axios' 這裡不再贅述
首先明確自己的api介面,比如我的是
http://testapi.tvm.com.cn/some/getsome
先去config/index.js中找到proxyTable
//如果你用vue-cli初始化一個專案,一般proxyTable中是空的 proxyTable:{} //在裡面填入: proxyTable:{ '/api': { target: 'http://testapi.tvm.com.cn',//設定你呼叫的介面域名和埠號 別忘了加http changeOrigin: true, pathRewrite: { '^/api': '', //這裡理解成用'/api'代替target裡面的地址,後面元件中我們掉介面時直接用api代替 比如我要呼叫'http://xxx.xxx.xxx.xx:8081/user/add',直接寫‘/api/user/add’即可 } } }
上面pathRewrite中的註釋不清楚,我再寫一遍:
用'/api'來代替target中的地址,以後再呼叫介面,比如http://testapi.tvm.com.cn/some/getsome
那麼就直接寫 '/api/some/getsome'
設定好之後,我們到一個元件中使用,上面已經引入了axios
let url='/api/some/getsome' axios.get(url) .then(res=>{ console.log(res) }) .catch(err=>{ console.log(err) })
這裡多嘴一下,請求方式很多,有get/post/delete/put等等,需要新增引數,可以這麼寫
let url=''
let element='某些請求引數'
axios.get(url,element)
.then
.catch
~~~完事~~~