vue.js學習之 跨域請求代理與axios傳參

標籤：跨域   local   技術分享   exp   com   注意   介面   blog   nbsp   

vue.js學習之 跨域請求代理與axios傳參一：跨域請求代理

1：開啟config/index.js

module.exports{    dev: {

    }}

在這裡面找到proxyTable{}，改為這樣：

proxyTable: {      ‘/api‘: {        target: ‘http://121.41.130.58:9090‘,//設定你調用的介面網域名稱和連接埠號碼 別忘了加http        changeOrigin: true,        pathRewrite: {          ‘^/api‘: ‘‘//這裡理解成用‘/api’代替target裡面的地址，後面組件中我們掉介面時直接用api代替 比如我要調用‘http://40.00.100.100:3002/user/add‘，直接寫‘/api/user/add’即可        }      }    }

2：在需要調介面的組件中這樣使用：

axios.post(‘/api/yt_api/login/doLogin‘,postData).then(function (response) {console.log(1)console.log(response);}).catch(function (error) {console.log(error);})

　　注意：原介面：http://http://121.41.130.58:9090/yt_api/login/doLogin

　　　　　 頁面調用：http://localhost:8081/api/yt_api/login/doLogin ——這裡多了一個/api/不是多餘的，不要刪

 

二：axios傳參

1：Vue官方推薦組件axios預設就是提交 JSON 字串，所以我們要以json字串直接拼接在url後面的形式，直接將json對象傳進去就行了

let postData = {‘companyCode‘:‘tur‘,‘userName‘:‘123456789123456789‘,‘password‘:‘123456‘}axios.post(‘/api/yt_api/login/doLogin‘,postData).then(function (response) {console.log(1)console.log(response);}).catch(function (error) {console.log(error);});

這裡我們將postData這個json對象傳入到post方法中，頁面中的形式為：

 

2：以key：val的形式傳參

let postData = qs.stringify({companyCode:‘tur‘,userName:‘123456789123456789‘,password:‘123456‘})

我們需要對這個json對象操作，這裡的qs你需要先安裝

npm install qs

再匯入

import qs from ‘qs‘

面中的形式為：

 

vue.js學習之 跨域請求代理與axios傳參