vue使用axios、axios配置跨域

1、vue-cli使用aios

    一、安裝命令：cnpm instal  axios --save

    二、main.js引入全局使用

//axios

import axios from 'axios'
Vue.prototype.$axios = axios

        三、組件或頁面中使用

methods: 
      {
        testAxios1:function(){
            console.log('test');
             this.$axios({
                                method: 'get',
                                url: 'data/personData.json'
                                })
                                .then(function (response) {
                                console.log(response)
                                })
                                .catch(function (error) {
                                console.log(error)
                                })
                            

        },

2、axios配置開發環境跨域請求代理

1：打開config/index.js

在這裏面找到proxyTable{}，改成這樣：

proxyTable: {
      '/api': {
        target: 'http://localhost:8085',//設置你調用的接口域名和端口號 別忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//這裏理解成用‘/api’代替target裏面的地址，後面組件中咱們掉接口時直接用api代替 好比我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’便可
        }
      }
    },

二、使用

methods: 
      {
        testAxios1:function(){
            console.log('test');
             this.$axios({
                                method: 'post',
                                url: 'http://localhost:8085/screen/selCaugh'
                                })
                                .then(function (response) {
                                console.log(response)
                                })
                                .catch(function (error) {
                                console.log(error)
                                })
                            

        },

 

 

3、axios傳參

1：Vue官方推薦組件axios默認就是提交 JSON 字符串，因此咱們要以json字符串直接拼接在url後面的形式，直接將json對象傳進去就好了

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