這篇文章主要介紹了如何使用nginx代理天地圖做緩存解決跨域問題,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴,公司提供的服務(wù)項(xiàng)目有:申請域名、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、甘孜州網(wǎng)站維護(hù)、網(wǎng)站推廣。作為一個(gè)GISer開發(fā)者,天地圖是經(jīng)常在項(xiàng)目中以底圖的形式出現(xiàn),其加載地址如:
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個(gè)服務(wù)器名稱t0,t1,t2....
下面是我以openlayers加載天地圖過程中遇到跨域問題
1、錯(cuò)誤的產(chǎn)生條件
// 采用openlayers加載天地圖 var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ // crossOrigin: 'Anonymous', // 是否請求跨域操作 url: url // 天地圖地址 }) });
如果沒有用到crossOrigin屬性就不會(huì)產(chǎn)生跨域問題,一般這個(gè)參數(shù)也不會(huì)設(shè)置。
這個(gè)參數(shù)使用場景如下官網(wǎng)所述:
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),可以發(fā)現(xiàn)crossOrigin有兩個(gè)取值
在開發(fā)過程中,往往需要本地運(yùn)行開發(fā)版,服務(wù)器運(yùn)行生產(chǎn)版。當(dāng)兩個(gè)版本在同一個(gè)瀏覽器中訪問時(shí),設(shè)置了crossOrigin就會(huì)出現(xiàn)跨域問題,如下圖所示的錯(cuò)誤,
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'header is present on the requested resource.
注:只有天地圖設(shè)置了crossOrigin之后會(huì)出現(xiàn)這個(gè)問題,谷歌底圖是不會(huì)出現(xiàn)的,原因是:
天地圖在返回的request header的Origin屬性設(shè)置成當(dāng)前訪問的IP,而google底圖Origin屬性設(shè)置的是*,意味著不同IP的系統(tǒng)在瀏覽器緩存了google瓦片之后依然能訪問google底圖。
2、錯(cuò)誤解決的方法
2.1 簡單暴力的方法
簡單暴力的解決方法就是清除瀏覽器的緩存圖片,在同一時(shí)刻,只查看一個(gè)其中的一個(gè)系統(tǒng),如果要查看另一個(gè)系統(tǒng),必須事先清除瀏覽器圖片緩存
2.2 刪除CrossOrigin屬性
重新審視一遍地圖需求,判斷是否真的需要crossOrigin屬性,如果不需要,就根本不會(huì)出現(xiàn)這個(gè)問題
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; # 關(guān)鍵代碼塊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 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; # 關(guān)鍵代碼塊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; } } }
下面解釋一下配置文件:
關(guān)鍵代碼塊1:
1、采用nginx upstream配置一組服務(wù)地址,做負(fù)載均衡用,其效果優(yōu)于openlayers順序遍歷t0至t6
2、設(shè)置了代理緩存臨時(shí)地址和緩存地址,這里可以采用相對路徑
關(guān)鍵代碼塊2
匹配到DataServer之后,需要
1、設(shè)置跨域header,這里用了一個(gè)新的nginx模塊——headers-more,需要在編譯nginx時(shí)加入,如果是windows下用nginx,可以用這個(gè)網(wǎng)站的安裝包:https://openresty.org,它預(yù)編譯了很多nginx實(shí)用模塊
2、用proxy_pass將地址代理到 http://tianditu_server/DataServer地址上,其中tianditu_server就是上面配置負(fù)載均衡的服務(wù)組名稱。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何使用nginx代理天地圖做緩存解決跨域問題”這篇文章對大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
本文名稱:如何使用nginx代理天地圖做緩存解決跨域問題-創(chuàng)新互聯(lián)
本文鏈接:http://muchs.cn/article18/csgedp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、做網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站改版、定制網(wǎng)站、定制開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)