Vue axios asynchronous, cross-domain requests and proxyTable invalidity Detailed

First, the asynchronous request:

1. command line:

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                
    //});

  },

},

 

Second, the cross-domain:

Reception * Web URL: vue dev url:

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

* Java backend 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. The browser F12 NetWork URL:

* Principle: config.js configuration can intercept / api prefix route configuration main.js access to / api and prefix (localhost: 8080) replaced target content config.js continue to visit, but the browser F12 NetWork URL shown below :

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

This is not a cross-domain URL domain name or domain name and other agents! ! ! So this judgment can not access the results! ! ! And the like may be determined in conjunction with Status Code 404/400/504 interface issues and problems Alternatively URL

Third, the cross-domain configuration invalidity:

1. The combination with the second, replacement can not be determined whether or URL is valid, requires a combination of Status Code, such as: paths 404 may alternatively be incorrect, 400/504 parameters may be transmitted even not normally access server interface

2.npm run dev

 

reference:

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