作為一個(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加載天地圖過(guò)程中遇到跨域問(wèn)題
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代理解決
如果前面的方法都感覺不合適，那就用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ù)組名稱。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
