Shulou(Shulou.com)06/01 Report--

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

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

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个服务器名称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有两个取值

During development, it is often necessary to run the development version locally and the server runs the production version. When two versions are accessed in the same browser, cross-domain problems will occur when crossOrigin is set, as shown in the following error.

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'header is present on the requested resource.

Note: This problem will only appear after crossOrigin is set on Sky Map. Google Basemap will not appear. The reason is:

The Origin attribute of the returned request header is set to the currently accessed IP, while the Origin attribute of the Google Basemap is set to *, which means that systems with different IPs can still access the Google Basemap after the browser caches the Google tiles.

2, the wrong solution

2.1 Simple, violent methods.

The simple solution to violence is to clear the browser cache of images. At the same time, only one of the systems is viewed. If you want to view another system, you must clear the browser cache of images first.

2.2 Remove CrossOrigin attribute

Review the map requirements to determine if you really need the crossOrigin attribute. If you don't need it, the problem won't arise at all.

2.3 nginx proxy solution

If the previous method does not feel appropriate, then use nginx to solve it, it can solve cross-domain problems, you can also cache tiles locally, speed up access.

Go directly to the configuration file.

#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; #Key code block 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; #Key Code Block 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; } }}

Here is an explanation of the configuration file:

Key Code Block 1:

1. Configure a group of service addresses with nginx upstream for Load Balancer, which is better than openlayers traversing t0 to t6 sequentially.

2. Set the proxy cache temporary address and cache address. Here, relative paths can be used.

Key Code Block 2

After matching to DataServer, you need

1. Set cross-domain header, here a new nginx module--headers-more is used, which needs to be added when compiling nginx. If nginx is used under windows, you can use the installation package of this website: https://openresty.org, which pre-compiles many nginx utility modules.

2. Proxy the address to http://tianditu_server/DataServer with proxy_pass, where tianditu_server is the name of the service group configured with Load Balancer above.

Thank you for reading this article carefully. I hope that Xiaobian's article "How to use nginx proxy map to do cache to solve cross-domain problems" will help everyone. At the same time, I hope everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.