Cesium结合nginx突破浏览器的最大并发请求数限制

浏览器对同一个域有最大并发请求数的限制，比如在chrome上，同一时刻最多只能有6个挂起（pending）的请求，在它们完成响应后才能继续发送新的请求。

基于Cesium开发三维数字地球应用时，往往会面对大数据量的模型、影像等切片数据，由于文件数很多，正常情况下加载速度会受到并发请求数的限制，假如遇到请求阻塞的情况，那么后面文件的请求甚至会一直挂起（pending），影响正常的加载逻辑。

通过配置nginx的反向代理将一个域“伪装”成多个域，绕开这个限制，浏览器最大并发请求数就可以成倍增长（在不考虑硬件性能极限的情况下）。

一个url是由：协议、域名、端口 三部分组成。当一个请求 url 的协议、域名、端口三者之间的任意一个与当前页面 url 不同即为跨域（不同的域）。

如下nginx配置代码所示：

第一个server监听实际路径，代理的地址是 http://localhost:8083/data ;

第二个server代理的是第一个server的地址，得到的地址是

• http://localhost:8867/test
• http://localhost:8868/test
• http://localhost:8869/test

端口号不同，就是3个不同的域

server {
    listen       8083;
    server_name  localhost;

    location /data {
		alias F:/servers/temp/nginx-1.22.0/data/;
		autoindex on;
	}
}

server {
    listen       8867;
	listen       8868;
	listen       8869;
    server_name  localhost;

    location /test {
        proxy_pass   http://localhost:8083/data;
		proxy_redirect off;
		proxy_buffering off;
    }
}

在Cesium上加载模型和影像数据，模型用8867端口，影像用8868、8869端口。这样模型数据和影像数据的加载就互不影响（不会因为在同一个域下，影像数据阻塞导致模型数据一直挂起），影像数据也通过“伪装”成两个域突破了浏览器最大并发请求数的限制。

模型加载（8867端口）：

tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: "http://localhost:8867/test/GH_Model_Merged/tileset.json",
    })
);

可以看到模型请求走的都是8867端口

影像加载（8868、8869端口）：

const urlImageryProvider = viewer.scene.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
        url: "http://{s}/GH_WMTS/{z}/{x}/{y}.png",
        fileExtension : "png",
        subdomains: ["localhost:8868/test", "localhost:8869/test"]
    })
);

影像请求走的是8868和8869端口