axios安装使用与跨域

安装axios：

npm i axios --save

在需要引入axios的组件中：

// 引入axios

import axios from 'axios'

// 挂载到Vue的原型上

Vue.prototype.axios = axios;

引入示例：

import axios from 'axios'

Vue.prototype.axios = axios;

axios使用示例：

// 保留this

          let _this = this;

        // 收集用户名和密码 发送给后端  （ '/域名/接口名',{收集用户名，密码 }

            this.axios.post('/api/checklogin',{

              username:_this.loginForm.username,

              password:_this.loginForm.password

            })

              .then(response => {

                console.log('接收后端响应登录请求的数据',response.data)

              })

axios跨域：

打开 node.js创建的本地服务器 server文件中 路由文件 routes 里面的index.js

将GET请求：router.get() 改为POST请求:router.post()

// 接收请求示例：

router.post('/checklogin',(req,res) => {

  res.send('1')

});

示例解析：

/checklogin 接收请求的地址

req 请求对象

res 响应对象

res.send('1') 响应数据

浏览器输入localhost:888      页面报 404

前端页面点击登录  控制台会报 跨域错误

---

解决跨域：

打开vue项目文件夹内的 config文件夹内的 index.js文件 找到 proxyTable：{}（大概在十三行）

https在百度搜索 proxyTable配置

在花括号添加：

'/api': {

        // 测试环境

        target: 'http://localhost:888/',  // 接口域名

        changeOrigin: true,  //是否跨域

        pathRewrite: {

          '^/api': ''  //需要rewrite重写的,

        }

    }

前端页面点击登录 控制台输出  1    请求成功。