如何使用nginx代理天地图做缓存解决跨域问题

　　介绍

这篇文章主要介绍了如何使用nginx代理天地图做缓存解决跨域问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

作为一个gis开发者,天地图是经常在项目中以底图的形式出现,其加载地址如:

1。天地图矢量:http://t{0胜}.tianditu.com/DataServer?T=vec_w& x={x}, y={y}, l={z}
2。天地图影像:http://t{0胜}.tianditu.com/DataServer?T=img_w& x={x}, y={y}, l={z}
3。天地图地形:http://t{0胜}.tianditu.com/DataServer?T=ter_w& x={x}, y={y}, l={z}

其中t{0}是天地图提供的7个服务器名称t0, t1, t2 ....

下面是我以openlayers加载天地图过程中遇到跨域问题

<强> 1,错误的产生条件

//,采用openlayers加载天地图 　　var  layer =, new  ol.layer.Tile ({ 　　来源:才能,new  ol.source.XYZ ({ 　　,,,//,crossOrigin:, & # 39;匿名# 39;,,//,是否请求跨域操作 　　,,,url:, url //,天地图地址 　　})才能 　　});

如果没有用到crossOrigin属性就不会产生跨域问题,一般这个参数也不会设置。

这个参数使用场景如下官网所述:

crossOrigin属性加载图片。请注意,您必须提供一个crossOrigin值如果使用WebGL渲染器或如果你想访问与画布渲染器像素数据。的更多细节见https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image .

查阅MDN文档(https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes),可以发现crossOrigin有两个取值

如何使用nginx代理天地图做缓存解决跨域问题

在开发过程中,往往需要本地运行开发版,服务器运行生产版。当两个版本在同一个浏览器中访问时,设置了crossOrigin就会出现跨域问题,如下图所示的错误,

已经被歌珥政策:没有& # 39;Access-Control-Allow-Origin& # 39;头存在alt="如何使用nginx代理天地图做缓存解决跨域问题">

注:只有天地图设置了crossOrigin之后会出现这个问题,谷歌底图是不会出现的,原因是:

天地图在返回的请求头的起源属性设置成当前访问的IP,而谷歌底图属起源性设置的是*,意味着不同IP的系统在浏览器缓存了谷歌瓦片之后依然能访问谷歌底图。

<强> 2,错误解决的方法

<强> 2.1简单暴力的方法

简单暴力的解决方法就是清除浏览器的缓存图片,在同一时刻,只查看一个其中的一个系统,如果要查看另一个系统,必须事先清除浏览器图片缓存

<强> 2.2删除crossOrigin属性

重新审视一遍地图需求,判断是否真的需要crossOrigin属性,如果不需要,就根本不会出现这个问题

<强> 2.3 nginx代理解决

如果前面的方法都感觉不合适的,那就用nginx来代理解决吧,它可以解决跨域问题,也可以将瓦片缓存至本地,加快访问速度。

直接上配置文件哈。

# user 没有人; 　　worker_processes  4; 　　 　　# error_log 日志/error.log; 　　# error_log 日志/error.log 注意; 　　# error_log 日志/error.log 信息; 　　 　　# pid ,,,日志/nginx.pid; 　　 　　 　　events  { 　　worker_connections 才能;1024; 　　} 　　 　　http  { 　　include 才能,,,,mime.types; 　　default_type 才能;应用程序/八进制; 　　 　　#才能log_format  main  & # 39; remote_addr 美元;作用;remote_user 美元;[time_local美元],“request"美元;,& # 39; 　　号,,,,,,,,,,,& # 39;status 美元;body_bytes_sent 美元;“http_referer"美元;,& # 39; 　　号,,,,,,,,,,,& # 39;“http_user_agent"美元;,“http_x_forwarded_for"美元;& # 39;; 　　 　　# access_log 才能日志/access.log 主要; 　　 　　sendfile 才能,,,,, 　　# tcp_nopush 才能,,, 　　 　　# keepalive_timeout 才能0; 　　keepalive_timeout 才能;65; 　　 　　# gzip 才能; 　　,, 　　client_max_body_size 才能;20米; 　　,, 　　,#关键代码块1 　　proxy_temp_path 才能. ./proxy_cache/tianditu_temp; 　　proxy_cache_path 才能. ./proxy_cache/tianditu 水平=1:2  keys_zone=cache_one: 200 m 活动=1 d  max_size=30克; 　　upstream 才能;tianditu_server  { 　　,,,server  t0.tianditu.com 体重=1,max_fails=2, fail_timeout=30年代; 　　,,,server  t1.tianditu.com 体重=1,max_fails=2, fail_timeout=30年代; 　　,,,server  t2.tianditu.com 体重=1,max_fails=2, fail_timeout=30年代; 　　,,,server  t3.tianditu.com 体重=1,max_fails=2, fail_timeout=30年代; 　　,,,server  t4.tianditu.com 体重=1,max_fails=2, fail_timeout=30年代; 　　,,,server  t5.tianditu.com 体重=1,max_fails=2, fail_timeout=30年代; 　　,,,server  t6.tianditu.com 体重=1,max_fails=2, fail_timeout=30年代; 　　,,} 　　,, 　　server {才能 　　,,,listen ,,, 8088; 　　,,,server_name 本地主机; 　　 　　,,,# charset  koi8-r; 　　 　　,,,# access_log 日志/host.access.log 主要; 　　 　　,#关键代码块2 　　,,,的位置/DataServer  { 　　,,,,,more_set_headers  & # 39; Access-Control-Allow-Origin:, * & # 39;; 　　,,,,,add_header  Access-Control-Allow-Headers  X-Requested-With; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

如何使用nginx代理天地图做缓存解决跨域问题