Vue 3.0跨域问题使用代理解决方法

最近用vue-element-admin框架，在访问阿凡达api和百度api的时候，会出现提示跨域问题。
搜索了半天，再通过自己尝试，总结如下：
Vue 3.0为了解决跨域，使用了 http-proxy-middleware 。
在根目录下，有个vue.config.js文件，只需要在其中配置proxy项，就能解决跨域问题。so easy

proxy: {
		"/locainfo": { //在request时适配发起的路径
			//发现适配路径后，替换为target目的路径
			target: "https://api.map.baidu.com",
			//发现当我们设置了 changeOrigin 后，实际上底层只会修改 header 的 host 字段。
			//如果有些服务有针对 header 中的 origin 或 referer 字段做判断，这时候需要额外处理
			changeOrigin: true,
			//ws: true/false: if you want to proxy websockets
			ws: true,
			//重写地址，将其中'/locainfo'替换为什么，如果是空，就是删除
     	    pathRewrite:{
        		'^/locainfo': ''
      		}
		},
    '/jokerdata': {
      target: 'http://api.avatardata.cn',
      changeOrigin: true,
      ws: true,
      pathRewrite: {
        '^/jokerdata': ''
      }
    }
}

还有更多的配置项，详情见链接

最后，在vue文件里，用axios访问如下格式

axios({
          url: '/locainfo/locapi/v2',
          method: 'get',
          params: {
          	......
          }
        }).then(resp => console.log(resp))
        .catch(err => console.log(err))

效果就是，将域名替换成target的域名，然后把 /locainfo 重写，这里就是删掉 /locainfo