vue(3)-axios与跨域问题

特别喜欢vue的官方文档，非常走心，所以让人很信任。vue必看的文档：
vue API
vue guide
上篇内容中基本的界面出来后加载数据就是重头戏了，vue官方推荐用axios，那我接下来也 用这个。

axios

1. 安装
   npm install axios --save
   import axios from 'axios'

2. GET使用

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3. POST使用

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

4. 并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

5. axios config

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

6. 请求别名

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

 axios.patch(url[, data[, config]])

7. 处理并发助理函数

axios.all(iterable)
axios.spread(callback)

8. 错误处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

简单介绍这么多，网上大同小异，可参考看云axios中文说明

axios 跨域

今天超级郁闷的，postman里面接口调得好好的，放到vue里面就不行了，

Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

这个错有没有人遇到过，403跨域，网上查了半天，问题是解决了，原因似乎懂了又似乎没懂，这里就不糊弄了（http基础薄弱要补额。。。。。）。彻底搞明白了再写一章。
解决方法如下：

1. 方法一在config下index.js的dev{}中填写

 proxyTable: {
      '/api': {  
        target: 'http://localhost:808/',//设置你调用的接口域名
        changeOrigin: true,  
        pathRewrite: {  
          '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://m.kugou.com/rank/info/?rankid=23784&page=1&json=true'，直接写‘/api/rank/info/?rankid=23784&page=1&json=true’即可  
        }  
      }  

然后再在调用的地方把http:###换成api，如下：

axios.get('/api/monitorcenter/getMqView', {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },

2. 方法二，服务器端添加拦截器，或加代理，无所不能的nginx一定会帮到你。