vue-cli3解决跨域问题

vue-cli2建的项目有build和config文件夹，可以直接修改配置文件，但是vue-cli3没有，所以解决跨域问题时要新建文件

（1）在项目的根目录建vue.config.js文件，书写如下

module.exports = {
  devServer: {
    open: true, // 是否自动弹出浏览器页面
    host: "localhost",
    port: '8080',
    proxy: {
      '/api': {
        target: 'http://119.3.208.63:8000', // 请求服务器根路径
        changeOrigin: true, // 是否跨域
        ws: true, // websocket
        pathRewrite: { // 重写路径: 当检测到请求地址里包含 /v1 时,将此路径进行跨域代理操作
          '^/api': '/api'
        }
      }
    }
  }
}

（2）在main.js里配置axios的默认路径

import axios from 'axios'
axios.defaults.baseURL = "http://xxxx:8000"

（3）用axios请求数据

 import axios from 'axios'
  export default {
    data() {
      return {
        images: []
      }
    },
    async created () {
      await axios.get('api/v1/banners/').then(res => {
        this.images = [].concat(res.data.data)
        // console.log(this.images)
      })
      .catch(function (error) {
        console.log(error.response)
      })
    }
  }

注意url的拼接，可以通过查看network里的request url检查url是否正确