Vue-axios

axios跨域问题解决

1.打开idea中的Terminal控制台窗口输入一下命令进行安装axios插件

npm install axios -S

2.在main.js中引入axios

//引入axios类似于ajax
import axios from 'axios'
//配置请求的根路径
axios.defaults.baseURL='/api'    //这个比较重要所有发送的请求都会添加上/api这个前缀
Vue.prototype.$axios=axios

3.在config文件中的index.js文件中大概是13行的位置找到proxyTable进行添加

proxyTable: {
  '/api':{    //公共部分也就是说上面定义的请求根路径
    target:"http://localhost:9100/",    //请求的第三方接口
    changeOrigin:true,    //在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
    pathRewrite:{    //路径重写
      '^/api':''    //替换target中的请求地址，也就是说以后在请求'http://localhost:9100/'这个地址的时候直接写成/api即可
                     //又因为上面已经定义过默认的请求根路径为/api所以说在接下来的请求中可以省略不写直接拼接后面的路径即可
    }
  }
},

4.测试demo

login(){
    this.$refs.loginFormRef.validate( async valid =>{
        console.log(valid);
        if (!valid) return;
        const result= await this.$axios.post("login/loginCheckOut",this.loginForm);
        console.log(result);
    });
}

来自为知笔记(Wiz)