threejs Mars3D模型加载外部资源的跨域问题

问题的现象

浏览器提示 CORS policy 错误，所加载的底图、地形、模型等外部数据没有显示。F12 中提示 CORS 相关错误。

#问题原因

这是资源跨域权限的错误，由于浏览器同源策略，凡是发送请求 url 的协议，域名，端口三者之间任意一个与当前页面地址不同即为跨域，存在跨域的情况：

• 网络协议不同，如 http 协议访问 https 协议。
• 端口不同，如 80 端口访问 8080 端口
• 域名不同，如www.jd.com 访问 baidu.com
• 子域名不同，如 abc.blog.com 访问 def.blog.com
• 域名和域名对应的 ip，如www.abc.com访问20，205，28，90

Access-Control-Allow-Origin 是 HTML5 中定义的一种服务器端返回 Response header，用来解决资源（比如字体）的跨域权限问题。 它定义了该资源允许被哪个域引用，或者被所有域引用（google 字体使用*表示字体资源允许被所有域引用）。

#解决方法及步骤

因为浏览器和 WebGL 的安全性要求，Cesium 和 Mars3D 加载的所有外部资源，都需要服务端允许跨域访问，跨域问题的终极解决方法在服务端：

• 若服务端可控：添加跨域头
• 若服务端不可控：添加代理服务，代理方式有很多，我们有 2 种推荐的方式：

1. 可以使用nginx (opens new window)来代理，需要有一定 nginx 基础知识。
2. 可以使用https://github.com/muyao1987/web-proxy (opens new window)发布的服务，并在相关代码配置 proxy 属性，来代理转发相关请求。

#非跨域的类似报错问题

以下一些问题也会提示CORS错误，但实际原因可能不是跨域引起的。

#问题1：The request client is not a secure context and the resource is in more-private address space private.

Chrome浏览器访问mars3d官网模型调试示例，加载本地localhost的服务模型时，报了这么个错：

 The request client is not a secure context and the resource is in more-private address space private.

1

这是浏览器安全机制,是谷歌94+后，新增的功能，公网资源(访问者) 访问 私网资源(被访问者)会提示此错误。

#解决方式

任选下面1种方式

1. 配置chrome选项，打开浏览器，进chrome://flags/#block-insecure-private-network-requests页面 ， 将Block insecure private network requests.配置项的Default改为Disabled即可
2. 两种资源都改成https 或 都改成内网或者外网IP
3. 配置Access-Control-Allow-Private-Network请求头（实际测试后，没有配置成功）

#问题2：瓦片404请求

访问影像瓦片底图时，如果瓦片不存在，也会在404错误后提示CORS错误。

#解决方式

1. 对瓦片配置rectangle参数，限定请求瓦片范围，

 {
    "name": "合肥",
    "type": "xyz",
    "url": "{dataServer}/tile/googleImg/{z}/{x}/{y}.jpg",
    "rectangle": { "xmin": 116.33236, "xmax": 118.183557, "ymin": 31.143784, "ymax": 32.565035 }
}

2. 服务端补充缺失的瓦片数据

参考地址