1. 程式人生 > >Vue專案中解決axios請求跨域問題(第三方介面)

Vue專案中解決axios請求跨域問題(第三方介面)

先引入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

~~~完事~~~