WebGL Earth在本地WAMP及线上服务器运行出现CORS问题如何解决？

问题根源 #

你当前配置的.htaccess跨域规则仅作用于你自己域名下的资源，本次报错的是webglearth.com官方域名下的天空盒图片未配置跨域响应头，因此你本地的跨域配置无法解决该问题。

可行解决方案 #

方案1：关闭天空盒（最快可用） #

你初始化地图时开启了天空盒功能，若不需要该效果可直接关闭，不会影响地球基础展示：
把你初始化地图的options修改为：

var options = {
  sky: false, // 原true改为false，关闭天空盒后不会请求跨域的天空盒资源
  atmosphere: true,
  zooming: true,
};

修改后重新加载页面即可解决报错。

方案2：本地托管天空盒资源（保留天空盒效果） #

如果需要保留天空盒效果，可自行将官方天空盒资源托管到自己的服务器：

1. 下载官方天空盒目录下的6张天空盒图片，上传到你自己项目的目录，比如/public/skybox/
2. 初始化地图时指定自定义的天空盒资源路径：

var options = {
  sky: true,
  atmosphere: true,
  zooming: true,
  skyBoxUrl: '/public/skybox/' // 替换为你自己服务器上的天空盒目录路径
};

该方案下资源走你自己的域名，你已经配置的跨域规则可以正常生效，不会出现跨域报错。

方案3：配置反向代理转发天空盒请求 #

如果不想下载资源，可在你的Apache服务器上配置反向代理，将天空盒请求转发到官方地址，走你自己的域名返回资源：

1. 先确保你的WAMP/Apache已经开启mod_proxy和mod_proxy_http扩展
2. 修改你的.htaccess文件，添加代理规则：

RewriteEngine on
RewriteCond %{REQUEST_URI} !/globenew/
RewriteRule ^/?(.*)$ /globenew/$1 [END,QSA]
# 新增天空盒代理规则
RewriteRule ^skybox/(.*)$ https://www.webglearth.com/v2/SkyBox/$1 [P,L]

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

3. 初始化地图时指定天空盒路径为你的代理路径：

var options = {
  sky: true,
  atmosphere: true,
  zooming: true,
  skyBoxUrl: '/skybox/'
};

内容的提问来源于stack exchange，提问作者user3653474