基于VUE的Cesium加载本地地图跨域问题解决方案

Cesium加载本地地图是报跨域错误

var viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,// 是否显示动画控件
    imageryProvider:new Cesium.UrlTemplateImageryProvider({
        url : 'http://127.0.0.1:3000/satellite/z={z}&x={x}&y={y}',              
    }),
    baseLayerPicker:false,// 去掉自带的图层选择器
});

解决方案

修改config\index.js 配置proxyTable

//接口地址原本是/satellite/z={z}&x={x}&y={y} 但是为了匹配代理地址 调用时需在前面加一个 /satellite,  因此接口地址需要写成这样的即可生效 /satellite/satellite/z={z}&x={x}&y={y}
proxyTable: {
  '/satellite': {//代理的目的：只要是/satellite开头的路径都往localhost:3000进行转发  
    target: 'http://localhost:3000', //后端接口地址 设置代理服务器地址 转发地址
    ws:true,//WebSocket协议
    changeOrigin: true, //表示是否改变原域名；这个一定要选择为true; 是否允许跨域[ 如果接口跨域 则要配置这个参数]
    // secure: false, // 如果是https接口 需要配置这个参数
    pathRewrite: {// 把程序中的地址转换成“真实地址”+‘/satellite’后面的部分如‘/satellite/satellite/z={z}&x={x}&y={y}'，被转换成'http://localhost:3000/satellite/z={z}&x={x}&y={y}'
        '^/satellite': ''//修改pathRewrite地址 将前缀'^satellite'转为'/satellite'
    } 
  },
  '/api': {
    target: 'http://192.168.2.190:8060', 
    ws:true,
    changeOrigin: true, 
    // secure: false, // 如果是https接口 需要配置这个参数
    pathRewrite: {
        '^/api': ''
    } 
  }
},

调用本地地图

src\views\Home.vue

var viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,
    imageryProvider:new Cesium.UrlTemplateImageryProvider({
        url : 'satellite/satellite/z={z}&x={x}&y={y}',  
    }),
    baseLayerPicker:false,
});

cesium+Vue项目环境搭建