Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use nginx proxy day map as cache to solve cross-domain problems". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to use nginx proxy day map as cache to solve cross-domain problems" can help you solve the problem.

1. Wrong conditions

//Load day map with openlayers var layer = new ol.layer.tile({ source: new ol.source.xyz ({ // crossorigin: 'anonymous',//whether cross-domain operation is requested url: url //day map address})});

Cross-domain issues do not arise if the crossorigin attribute is not used, and generally this parameter is not set.

This parameter is used in the following scenarios:

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.

Check the mdn documentation (https://developer.mozilla.org/zh-cn/docs/web/html/cors_settings_attributes) and you can see that crossigin has two values

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 crosssorigin is set in the sky map. Google basemap will not appear. The reason is:

The origin attribute of the returned request header is set to the ip of the current visit, while the origin attribute of the google basemap is set to *, which means that systems with different ip can still access the google basemap after the browser caches the google tile.

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, 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 above which Load Balancer is configured.

About "how to use nginx proxy day map cache to solve cross-domain problems" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

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.