vue使用axios并解决跨域问题

前端vue版本：2.x
后端：Springboot，使用@Mapper

1. 使用npm下载axios

npm install axios

2. 在main.js中配置反向代理

添加下面的代码：

// 设置反向代理，前端请求默认发送到 http://localhost:8888/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8888/api'

Vue.prototype.$axios=axios

3. 修改vue.config.js文件，配置proxy

在module.exports里面添加以下内容：

devServer: {
    host: 'localhost',
    port: 8080,
    // https: false,
    open: true, // 配置自动启动浏览器
    //autoOpenBrowser: true,
    proxy: {
      '/api': { // 路径中有 /api 的请求都会走这个代理
        target: 'http://localhost:8888', // 要访问的接口域名
        ws: true, // 是否启用  websockets
        secure: false,
        changeOrigin: true,
        // 开启代理：在本地会创建一个虚拟服务端，
        // 然后发送请求的数据，并同时接收请求的数据，
        // 这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          '^/api': '' // 这里理解成用/api代替target里面的地址，即去掉路径中的/api  的这一截
        }
      }
    }
  },

4. 在.vue文件中使用get请求

this.$axios.get('/battery/getBatteryDetail').then(res => {
  if (res.status == 200) {
    console.log(res.data)
  }
})

最终效果：成功拿到数据

注意：

1. 一定要设置反向代理
2. 如果自己的是404，但是把请求地址换成https://api.map.baidu.com是200的话，那就排查自己的proxyTable配置中是不是有多个跨域接口配置，pathRewrite是否有冲突了，导致地址解析错误而报错404。

因为我本来把this.$axios.get('/battery/getBatteryDetail')写成了this.$axios.get('http://localhost:8888/battery/getBatteryDetail')，前面的部分多余了，所以一直404。删掉就好了