Vue axios异步、跨域请求及proxyTable无效问题详解

一、异步请求：

1.命令行 :

cd my-project

npm install --save axios 

2.main.js:

// 引入axios异步请求
import Axios from 'axios'
Vue.prototype.$axios=Axios;

3.xx.vue：

mounted() {
  this.getUserList();
},
methods: {
  getUserList: function () {
    var url = "/user/select";
    var _this = this;
    _this.$axios.get(url).then((result) => {
      // result是所有的返回回来的数据
      // 包括了响应报文行
      // 响应报文头
      // 响应报文体
    });

    //_this.$axios.post(url, {name: "xxx"}).then(function (res) {
    //  // res                
    //});

  },

},

二、跨域：

*Web 前台URL：vue dev url：

http://localhost:8080/#/user/list

*Java 后台URL：Spring Boot API url：

http://localhost:8081/demo/user/select

1.main.js：

// 引入axios异步请求
import Axios from 'axios'
Vue.prototype.$axios=Axios;
// 跨域相关
Axios.defaults.baseURL="/api"
Axios.defaults.headers.post['Content-Type']='application/json';

2.config/index.js：

dev: {

  // Paths
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {

    // 跨域处理
    '/api':{
      target: "http://localhost:8081/demo",
      changeOrigin:true,
      pathRewrite:{
        '^/api':''
      }
    }

  },

3.浏览器F12 NetWork URL：

*原理：config.js配置后会拦截main.js 配置的/api前缀路由访问，将/api及前缀（localhost:8080）替换为config.js的target内容继续访问，但浏览器F12 NetWork URL显示如下：

http://localhost:8080/api/user/select

此URL并不是跨域域名或代理域名等！！！所以不能以此判断访问结果！！！可结合Status Code 404/400/504等判断URL替换问题及接口问题

三、配置跨域后无效问题：

1.结合第二，不能通过URL判断是否替换或是否有效，需要结合Status Code，如：404可能是路径替换不正确，400/504可能是传参甚至服务器接口不能正常访问

2.npm run dev

参考：

https://www.cnblogs.com/mrszhou/p/7859012.html

https://blog.csdn.net/yuanlaijike/article/details/80522621

https://www.cnblogs.com/wancheng7/p/8987694.html

https://www.cnblogs.com/raind/p/9225195.html