Vue跨域问题——vue2.0 proxyTable配置,以及配置后为什么无法生效问题

一.遇到的问题

今天在项目中需要访问网易云音乐中的歌手信息接口
通过axios调取接口后出现了如下问题

这就是因为跨域访问出现的问题

那么为什么会出现跨域问题呢？

因为因为浏览器同源策略的限制，不是同源的脚本不能操作其他源下面的对象

同源策略的概念

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
简单的来说:协议、IP、端口三者都相同，则为同源

二.解决方法

跨域的方法其实有很多，像是jsonp,通过后端配置cros等等，其实用后端来配置更加方便，但对于前端人员来说，下面这种直接在Vue中配置代理的方法更值得知晓
首先是来到config文件夹下面的index.js文件去配置proxyTable
我需要请求访问的URL是http://music.163.com/api/search/get/web?s=林俊杰&type=100

proxyTable的配置如下

proxyTable: {
      '/apis': {
        target: 'http://music.163.com',      //需要访问接口的域名
        changeOrigin: true, 			//是否需要跨域
        pathRewrite: {						//重写 '/apis' 为其他，默认为空或者'/'
          '^/apis': ''
        }
      },

在这里面 /apis 就相当于'http://music.163.com'
所以接下来接口需要添加的的url参数不需要再写接口的域名

下面是使用axios访问接口的代码

因为我的数据是定义在表单中的，所以穿的参数s和type也从data中获取

getImg() {
      this.axios.get('/apis/api/search/get/web',{
        params: {
          s: this.list.s,
          type: this.list.type
        },
      }).then( ({data:{result:{artists=[]}}}) => {
        const {picUrl} = artists[0]
        //console.log(picUrl)
        this.list.picUrl = picUrl
        console.log(this.list.picUrl)
      }).catch(error => {
        console.log(error)
        console.log('请求失败了')
      })
    }

三.proxyTable配置好后无法生效

因为我们是在config文件夹下的index.js中配置的，修改的是vue的配置文件
所以是没有办法热更新的，需要重新打包运行才可以消除之前的缓存，更新配置文件的代码
所以如果没有生效，只需要结束服务，重新打包运行再起服务就可以了