一、Axios 是什么

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。

特性：

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

二、安装axios

 初始化一个新项目，可参考文章 Vue.js 安装使用教程_种麦南山下的博客-CSDN博客

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project

安装axios

使用 npm:
$ npm install axios
 

或者 使用 bower:
$ bower install axios
 

或者直接使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三、引入axios

在 main.js 文件中修改

import axios from 'axios'
//将axios全局挂载到Vue原型上
//Vue.prototype.$axios = axios    //使用this.axios.post(url,)
Vue.prototype.$http = axios       //使用this.$http.post(url,) 

new Vue({
  el: '#app',
  components: { App },  
  template: '<App/>',
  render: h => h(App),
  created() {
    // 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  },
})

结果：（使用 http://localhost:8888/.... 去访问 http://localhost:8080/user..... 涉及到端口的跨域，所以无法访问）

四、跨域请求

1、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

2、为什么要使用proxyTable

• 很简单，两个字，跨域。
• 在平时项目的开发环境中，经常会遇到跨域的问题，尤其是使用vue-cli这种脚手架工具开发时，由于项目本身启动本地服务是需要占用一个端口的，所以必然会产生跨域的问题。当然跨域有多种解决方式，这里就不一一例举，下次弄篇文章单独讲，在使用webpack做构建工具的项目中 使用proxyTable代理实现跨域 是一种比较方便的选择。

3、在webpack.config.js（config—>index.js）文件里设置代理  注意  新版文件会有修改

这里端口号是8888

proxyTable: {
      '/api': {
        target: 'http://localhost:8888/', //设置调用接口域名和端口号别忘了加http  //目标接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
        }
      }

    },

（1）'^/api': '/'  解释说明

比如我要调用'http://localhost:3000/user/add'，直接写 '/api/user/add' 即可，代理后地址栏显示/

//http://localhost:8888/api/test

this.$http.post('/api/test')
.then(response => {
    console.log(response.data.data.length)
})
.catch(error => {
    console.log(error)
})

或者： 在 main.js 中添加，起到相同的效果，正常跳转

//http://localhost:8888/api/test

axios.defaults.baseURL="/api"; 



//调用
this.$http.post('/test')
.then(response => {
    console.log(response.data.data.length)
})
.catch(error => {
    console.log(error)
})

（2）如果 将 '^/api': '/'  改为 '^/api': '/api'

//调用
this.$http.post('/test')
.then(response => {
    console.log(response.data.data.length)
})
.catch(error => {
    console.log(error)
})

结果报错：（这里请求的仍然是8080端口，并不是http://localhost:8888/api/test）

axios的详细用法以及后端接口代理 - 猫哥在奔跑 - 博客园

webpack之proxyTable设置跨域 - 西风瘦码 - 博客园

vue 使用axios 出现跨域请求的两种解决方法_想想就很棒的博客-CSDN博客