详解nginx代理天地图做缓存解决跨域问题

下面我会给出完整的攻略来详解使用nginx代理天地图做缓存解决跨域问题，并配上两个示例。

背景

在前后端分离的开发模式下，实现跨域请求是一项常见的问题。由于浏览器的安全策略，直接请求非当前域名下的数据是被禁止的。而使用开放数据接口的时候，往往需要使用跨域请求的方式来获取数据。为此，我们常常使用代理服务器来解决该问题。

如何使用nginx做缓存代理

nginx 作为高性能的 HTTP 服务器，代理以及负载均衡服务器广泛应用于 Web 服务中。nginx 可以代理不同的协议，如 HTTP、TCP 和 UDP，并且可以进行反向代理、负载均衡、缓存等多种操作。下面，我基于nginx实现代理天地图做缓存的方法。

1. 安装nginx

在官网下载对应的安装包或进行安装方式，本文不再赘述。

1. 配置nginx.conf

在 nginx.conf 中配置如下代码：

http {
    proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=my_cache:10m inactive=60m;
    proxy_cache_key "$host$request_uri";
    server {
        listen       80;
        server_name  localhost;

        location / {
            proxy_pass http://api.tianditu.gov.cn;
            proxy_set_header Host $proxy_host;
            proxy_cache my_cache;
            proxy_cache_valid 200 304 12h;
            proxy_cache_valid 404 5m;
            proxy_cache_bypass  $http_pragma;
            proxy_cache_revalidate on;
        }
    }
}

如上代码描述：

• proxy_cache_path：nginx 缓存的路径，该路径需要预先创建。
• keys_zone：定义缓存的名字和大小，这里定义了一个名叫 my_cache 的缓存。
• proxy_cache_key： 存储缓存时，使用的键值，这里的配置是使用请求的域名和路径作为缓存键值。
• proxy_cache： 定义使用的缓存名字，也就是我们上面定义的 my_cache。
• proxy_cache_valid： 缓存有效期的配置，配置不同响应的不同有效时间，这里 200 和 304 的有效期是12小时，404 的有效期是 5 分钟。
• proxy_cache_bypass： 设置要绕过缓存的请求方法协议等，这里使用 $http_pragma，即请求头信息中是否存在 Pragma 是 no-cache。

• proxy_cache_revalidate： 在缓存过期之后，是否需要再次向后端请求数据进行比对，这里配置为 on。

• 解决跨域问题

通过配置nginx实现执行天地图的数据获取时不会跨域问题，修改nginx配置文件的 location 对象配置：

http {
    proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=my_cache:10m inactive=60m;
    proxy_cache_key "$host$request_uri";
    server {
        listen       8000;
        server_name  localhost;
        location / {
            proxy_pass http://api.tianditu.gov.cn;
            proxy_set_header Host $proxy_host;
            add_header Access-Control-Allow-Origin * always;
            proxy_cache my_cache;
            proxy_cache_valid 200 304 12h;
            proxy_cache_valid 404 5m;
            proxy_cache_bypass  $http_pragma;
            proxy_cache_revalidate on;
        }
    }
}

这样，我们就可以完成跨域问题的解决了，即使用nginx代理服务器实现对天地图的访问缓存。

示例1：获取中国天地图矢量切片服务

获取天地图的矢量切片服务，我们需要使用如下代码：

var url = `http://t0.tianditu.gov.cn/vec_w/wmts?service=WMTS&request=GetTile&version=1.0.0&layer=vec&style=default&format=tiles&tileMatrixSet=w&tileMatrix=${z}&tileRow=${y}&tileCol=${x}`;
fetch(url, {
      credentials: 'include', 
      method: 'GET',
      headers: {
          'Content-Type': 'application/json'
       }
}).then(data => {
    console.log('>>> data: ', data);
}).catch(err => {
    console.log('>>> err: ', err);
})

这里，我们使用的是 fetch API 来获取天地图矢量切片服务。但是在实际使用得到过程中，由于天地图 API 也需要跨域请求，所以我们会遇到 CORS (Cross-Origin Resource Sharing) 的问题。此时，我们可以使用上述方法来解决跨域问题。

示例2：获取中国天地图WMS服务

获取天地图的 WMS (Web Map Service) 服务，我们需要使用如下代码：

var url = `http://t4.tianditu.gov.cn/DataServer?T=${params.layerName}&x=${params.x}&y=${params.y}&l=${params.level+1}`;
fetch(url, {
      credentials: 'include', 
      method: 'GET',
      headers: {
          'Content-Type': 'application/json'
       }
}).then(data => {
    console.log('>>> data: ', data);
}).catch(err => {
    console.log('>>> err: ', err);
})

同样，由于使用到了跨域请求，我们也会遇到 CORS (Cross-Origin Resource Sharing) 的问题，此时我们也可使用上述方法来解决跨域问题。

以上是完整的攻略，包括了使用 nginx 代理天地图的缓存和解决跨域问题的方法，并给出了两个示例阐述使用 nginx 的步骤，相信读者在阅读后已经能够掌握该方法的使用。