axios的使用与跨域问题

1.引入axios   

cnpm install axios --save

2.全局注册    

import axios from "axios";
Vue.prototype.axios = axios;

 

3.调用方法

this.axios
        .get("路径")
        .then(function(response) {
          console.log(response.data);
        })
        .catch(function(error) {
          console.log(error);
        });

 

4.跨域问题

若是webpack-simple项目，找到webpack.config.js，修改devServer

    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true,
        host: "localhost",           //当前vue地址，不要加http
        port: 8080,                  //当前vue端口号
        proxy: {
            "/api": {                //注意这个api是自己取的名，前台调用的时候需要访问
                target: "http://localhost:8082/",//访问的目标地址及端口，一定要加http
                changeOrigin: true,   //启动跨域
                secure: false
            }
        }
    },

若是webpack项目，则是找到config下index.js，修改proxyTable

        proxyTable: {
            "/api": {
                //注意这个api是自己取的名，前台调用的时候需要访问
                target: "http://localhost:8081/", //访问的目标地址及端口，一定要加http
                changeOrigin: true, //启动跨域
                secure: false
            }
        },

3.调用时

this.axios.get("/api/musicFindAll")

这里的api就是刚才devServer那个，一定要加，还有斜杠也不能缺。

按我的理解，这里的api先去找devServer-proxy里的对应的api中target替换掉，所以相当于访问了http://localhost:8082/musicFindAll。这里用到了反向代理技术，显示访问的路径仍是http://localhost:8080/api/musicFindAll。至此就实现了简单的前后台连接。