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

這篇文章主要介紹了詳解nginx代理天地圖做快取解決跨域問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
作為一個GISer開發者，天地圖是經常在專案中以底圖的形式出現，其載入地址如：

1.天地圖向量： {0-6}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}
2.天地圖影像： {0-6}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}
3.天地圖地形： {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 -  $remot{e}_{u}ser[$ time_local] “ KaTeX parse error: Expected 'EOF', got '#' at position 12: request" ' #̲ ' status  $bod{y}_{b}yte{s}_{s}ent"$ http_referer” ’ # ‘“ $htt{p}_{u}se{r}_{a}gent""$ 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=1d max_size=30g; upstream tianditu_server { server   weight=1 max_fails=2 fail_timeout=30s; server   weight=1 max_fails=2 fail_timeout=30s; server  weight=1 max_fails=2 fail_timeout=30s; server   weight=1 max_fails=2 fail_timeout=30s; server   weight=1 max_fails=2 fail_timeout=30s; server   weight=1 max_fails=2 fail_timeout=30s; server   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 } }}