怎么用nginx代理天地圖做緩存解決跨域問(wèn)題

這篇文章主要介紹“怎么用nginx代理天地圖做緩存解決跨域問(wèn)題”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“怎么用nginx代理天地圖做緩存解決跨域問(wèn)題”文章能幫助大家解決問(wèn)題。

成都創(chuàng)新互聯(lián)公司是專業(yè)的朔城網(wǎng)站建設(shè)公司，朔城接單;提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行朔城網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

1、錯(cuò)誤的產(chǎn)生條件

// 采用openlayers加載天地圖
var layer = new ol.layer.tile({
  source: new ol.source.xyz({
    // crossorigin: 'anonymous', // 是否請(qǐng)求跨域操作
    url: url // 天地圖地址
  })
});

如果沒(méi)有用到crossorigin屬性就不會(huì)產(chǎn)生跨域問(wèn)題，一般這個(gè)參數(shù)也不會(huì)設(shè)置。

這個(gè)參數(shù)使用場(chǎng)景如下官網(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ā)過(guò)程中，往往需要本地運(yùn)行開發(fā)版，服務(wù)器運(yùn)行生產(chǎn)版。當(dāng)兩個(gè)版本在同一個(gè)瀏覽器中訪問(wèn)時(shí)，設(shè)置了crossorigin就會(huì)出現(xiàn)跨域問(wè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è)問(wèn)題，谷歌底圖是不會(huì)出現(xiàn)的，原因是：

天地圖在返回的request header的origin屬性設(shè)置成當(dāng)前訪問(wèn)的ip，而google底圖origin屬性設(shè)置的是*，意味著不同ip的系統(tǒng)在瀏覽器緩存了google瓦片之后依然能訪問(wèn)google底圖。

2、錯(cuò)誤解決的方法

2.1 簡(jiǎn)單暴力的方法

簡(jiǎn)單暴力的解決方法就是清除瀏覽器的緩存圖片，在同一時(shí)刻，只查看一個(gè)其中的一個(gè)系統(tǒng)，如果要查看另一個(gè)系統(tǒng)，必須事先清除瀏覽器圖片緩存

2.2 刪除crossorigin屬性

重新審視一遍地圖需求，判斷是否真的需要crossorigin屬性，如果不需要，就根本不會(huì)出現(xiàn)這個(gè)問(wèn)題

2.3 nginx代理解決

如果前面的方法都感覺(jué)不合適，那就用nginx來(lái)代理解決吧，它可以解決跨域問(wèn)題，也可以將瓦片緩存至本地，加快訪問(wèn)速度。

直接上配置文件哈。

#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í)地址和緩存地址，這里可以采用相對(duì)路徑

關(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ù)組名稱。

關(guān)于“怎么用nginx代理天地圖做緩存解決跨域問(wèn)題”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

分享名稱：怎么用nginx代理天地圖做緩存解決跨域問(wèn)題
當(dāng)前地址：http://bm7419.com/article8/iicdip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、虛擬主機(jī)、網(wǎng)站營(yíng)銷、品牌網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)