如何解决Cesium使用nginx代理加载离线地形数据过程中出现的跨域问题

许多文章讲述了如何基于Cesium加载本地离线三维地形数据。由于Cesium的地形加载只支持读取URL，不能直接读取本地数据的文件夹路径，因此目前常用的方式是将获取的terrain地形数据利用nginx代理发布到本地服务器（例如：http://localhost:8080/terrain/）。然而，本人在实际操作过程中发现，nginx正常发布数据后，Cesium加载所发布数据会出现跨域报错问题，如下所示：

Access to XMLHttpRequest at ‘xxx’ from origin ‘xxx’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决方法：在nginx.conf中修改配置，增加跨域请求，如下所示：

add_header Access-Control-Allow-Origin *

为了快速掌握，笔者给了一个nginx.conf的设置demo

    server {
	    #自定义端口号
        listen 8080;  
		 #Access-Control-Allow-Origin *解决跨域问题跨域
         add_header Access-Control-Allow-Origin *;
         add_header Access-Control-Allow-Credentials true;
         add_header Access-Control-Allow-Headers Origin,X-Requested-Width,Content-Type,Accept;
         add_header Access-Control-Allow-Methods *;
         add_header Access-Control-Max-Age 1728000;
         if ($request_method = 'OPTIONS') {
               return 204;
         }
        #设置route /terrain  （route路由名称：terrain）
        location /terrain {
		    #terrain数据所在位置 绝对路径/相对路径（相对nginx.exe位置）都可以
            alias D:/GoogleChrome/terrain;
            autoindex on;
            autoindex_localtime on;
        } 
    }

Cesium加载本地服务：

var myTerrainProvider= new Cesium.CesiumTerrainProvider({
    url: "http://localhost:8080/terrain"
});
var viewer = new Cesium.Viewer('name', {
    terrainProvider: myTerrainProvider,
});

值得注意的是，nginx存在一个端口号，Cesium项目运行也存在一个端口号，两个端口号需不同！否则会出现访问冲突的情况。

此外，大家可以利用地理数据云下载所需DEM.tif数据，并利用Cesiumlab2将tif数据转为terrain数据，便于后期的工作或研究。

最后来看看离线加载的三维地形效果，以广东省深圳市为例：