Vue用axios跨域訪問數據

Vue用axios跨域訪問數據
axios是vue-resource的替代品，vue-resource不再維護。
安裝axios：npm install axios
使用vue-cli開發時，由於項目本身啟動本地服務是需要占用一個端口的，所以會產生跨域的問題。在使用webpack做構建工具的項目中,使用proxyTable代理實現跨域是一種比較方便的選擇。
proxyTable相關配置及使用說明：
在config/index.js文件中，找到dev對象下proxyTable對象進行跨域設置，配置如下：

dev: {
    env: require('./dev.env'),
    host: 'localhost',
    port: 8088,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
            '/api': {
        target: 'https://api.douban.com/v2/movie/',//設置你調用的接口域名和端口號 別忘了加http、https
        changeOrigin: true,//是否跨域
                secure: true, // 允許https請求
        pathRewrite: {
          '^/api': ''//這里理解成用‘/api’代替target里面的地址
        }
      }
    },
--------------------
main.js
/*ajax請求*/
import axios from 'axios'
axios.defaults.baseURL = '/api'//https://api.douban.com/v2/movie 改成/api才能用proxyTable跨域
Vue.prototype.$ajax = axios

--------------------
proxyTable配置的意思為：使用字符串"/api"來代替目標接口域名；如果接口地址為"user/getUserInfo",我們可以在所有的接口地址前面加上"/api/"用於設置代理；如:
'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/api/user/getUserInfo'
如果你不想每次請求地址中都帶有"/api/",則可以設置
pathRewrite: {
'^/api': '' // 后面可以使重寫的新路徑，一般不做更改
}
表現結果為：
'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/user/getUserInfo'
另外一種情況是，我們不需要在每個接口地址前添加"/api/",只需要用接口本身的地址，不需要重新路徑即可。如果接口為："/v2/cotton/get_app_list",使用"/v2"做代理；如下：

dev: {
  proxyTable: {
    '/v2': {
      target: 'http://www.abc.com',  //目標接口域名
      changeOrigin: true,  //是否跨域
      secure: false,  // 允許https請求      
      // 這里去掉了重新設置新路徑，因為接口地址本身就是以"/v2/"開頭的；
    }
}
'http://localhost:8080/v2/cotton/get_app_list' ===> 'http://www.abc.com/v2/cotton/get_app_list'
// http://localhost:8080/v2表示http://www.abc.com
默認情況下，不接受運行在 HTTPS 上，且使用了無效證書的后端服務器。如果你想要接受，修改配置如下：
proxy: {
  "/api": {
    target: "https://www.abc.com",
    secure: false
  }
}

========================

axios傳參

1：Vue官方推薦組件axios默認就是提交 JSON 字符串，所以我們要以json字符串直接拼接在url后面的形式，直接將json對象傳進去就行了
let postData = {
　　companyCode:'zdz',
　　userName:'123456789123456789',
　　password:'123456'
}
axios.get('/api/login/doLogin',{
　　params: {
　　　　...postData,
　　}
})
.then(function (response) {
　　console.log(response);
})
.catch(function (error) {
　　console.log(error);
});

這里我們將postData這個json對象傳入到post方法中

2：以key：val的形式傳參
(1).安裝qs:npm install qs
(2).對這個json對象操作
let postData = qs.stringify({
companyCode:'zdz',
userName:'123456789123456789',
password:'123456'
})
(3).再導入
import qs from 'qs'