nginx代理天地圖做快取解決跨域問題

weixin_34104341發表於2020-04-07
Nginx地圖快取跨域

作為一個GISer開發者，天地圖是經常在專案中以底圖的形式出現，其載入地址如：

  1. 天地圖向量：http://t{0-6}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}
  2. 天地圖影像：http://t{0-6}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}
  3. 天地圖地形：http://t{0-6}.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}

其中t{0-6}是天地圖提供的7個伺服器名稱t0,t1,t2....

下面是我以openlayers載入天地圖過程中遇到跨域問題

1、錯誤的產生條件

// 採用openlayers載入天地圖
var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        // crossOrigin: 'Anonymous', // 是否請求跨域操作
        url: url // 天地圖地址
    })
});

 

如果沒有用到crossOrigin屬性就不會產生跨域問題，一般這個引數也不會設定。

這個引數使用場景如下官網所述：

The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you are using the WebGL renderer or if you want to access pixel data with the Canvas renderer. See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.

查閱MDN文件（https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes），可以發現crossOrigin有兩個取值

在開發過程中，往往需要本地執行開發版，伺服器執行生產版。當兩個版本在同一個瀏覽器中訪問時，設定了crossOrigin就會出現跨域問題，如下圖所示的錯誤，

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

注：只有天地圖設定了crossOrigin之後會出現這個問題，谷歌底圖是不會出現的，原因是：

天地圖在返回的request header的Origin屬性設定成當前訪問的IP，而google底圖Origin屬性設定的是*，意味著不同IP的系統在瀏覽器快取了google瓦片之後依然能訪問google底圖。

2、錯誤解決的方法

2.1  簡單暴力的方法

簡單暴力的解決方法就是清除瀏覽器的快取圖片，在同一時刻，只檢視一個其中的一個系統，如果要檢視另一個系統，必須事先清除瀏覽器圖片快取

2.2  刪除CrossOrigin屬性

重新審視一遍地圖需求，判斷是否真的需要crossOrigin屬性，如果不需要，就根本不會出現這個問題

2.3  nginx代理解決

如果前面的方法都感覺不合適，那就用nginx來代理解決吧，它可以解決跨域問題，也可以將瓦片快取至本地，加快訪問速度。

直接上配置檔案哈。

#user  nobody;
worker_processes  4;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    
    client_max_body_size 20M;
    
　　 # 關鍵程式碼塊1
    proxy_temp_path ../proxy_cache/tianditu_temp;
    proxy_cache_path ../proxy_cache/tianditu levels=1:2 keys_zone=cache_one:200m inactive=100d max_size=30g;
    upstream tianditu_server {
        server t0.tianditu.com weight=1 max_fails=2 fail_timeout=30s;
        server t1.tianditu.com weight=1 max_fails=2 fail_timeout=30s;
        server t2.tianditu.com weight=1 max_fails=2 fail_timeout=30s;
        server t3.tianditu.com weight=1 max_fails=2 fail_timeout=30s;
        server t4.tianditu.com weight=1 max_fails=2 fail_timeout=30s;
        server t5.tianditu.com weight=1 max_fails=2 fail_timeout=30s;
        server t6.tianditu.com weight=1 max_fails=2 fail_timeout=30s;
    }
    
    server {
        listen       8088;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

　　　　 # 關鍵程式碼塊2
        location /DataServer {
            more_set_headers 'Access-Control-Allow-Origin: *';
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
            
            proxy_cache cache_one;
            proxy_cache_key $uri$is_args$args;
            proxy_pass http://tianditu_server/DataServer;
        }
    }

}

 

下面解釋一下配置檔案：

關鍵程式碼塊1：

1、採用nginx upstream 配置一組服務地址，做負載均衡用，其效果優於openlayers順序遍歷t0至t6

2、設定了代理快取臨時地址和快取地址，這裡可以採用相對路徑

關鍵程式碼塊2

匹配到DataServer之後，需要

1、設定跨域header，這裡用了一個新的nginx模組——headers-more，需要在編譯nginx時加入，如果是windows下用nginx，可以用這個網站的安裝包：https://openresty.org，它預編譯了很多nginx實用模組

2、用proxy_pass將地址代理到 http://tianditu_server/DataServer 地址上，其中tianditu_server就是上面配置負載均衡的服務組名稱。

 

補充：

最近訪問天地圖老出現503錯誤，然後過幾分鐘之前就正常了，這估計是天地圖伺服器承載不了過多請求，然後就丟擲了503錯誤，所以為長久打算，還是有必要在自己的伺服器上搭建一個nginx做代理快取。

 

轉載於:https://www.cnblogs.com/zhang90030/p/9429649.html

相關文章