search
HomeOperation and MaintenanceNginxHow to use nginx proxy map as cache to solve cross-domain problems

1. Error generation conditions

// 采用openlayers加载天地图
var layer = new ol.layer.tile({
  source: new ol.source.xyz({
    // crossorigin: 'anonymous', // 是否请求跨域操作
    url: url // 天地图地址
  })
});

If the crossorigin attribute is not used, cross-domain problems will not occur, and generally this parameter will not be set.

The usage scenario of this parameter is as described on the official website:

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.

Consult mdn documentation (https: //developer.mozilla.org/zh-cn/docs/web/html/cors_settings_attributes), you can find that crossorigin has two values

How to use nginx proxy map as cache to solve cross-domain problems

In the development process, often You need to run the development version locally and the production version on the server. When two versions are accessed in the same browser, cross-domain problems will occur if crossorigin is set, such as the error shown in the figure below,

has been blocked by cors policy: no 'access-control-allow -origin'header is present on the requested resource.

How to use nginx proxy map as cache to solve cross-domain problems

Note: This problem will only occur after crossorigin is set on Tiantu. It will not appear on Google basemap. The reason Yes:

The origin attribute of the request header returned by Tiantu is set to the currently visited IP, while the origin attribute of the Google base map is set to *, which means that systems with different IPs cache Google tiles in the browser You can still access the google basemap afterwards.

2. Error resolution method

2.1 Simple and violent method

The simple and violent solution is to clear the browser Cache images, at the same time, only view one of the systems. If you want to view another system, you must clear the browser image cache in advance

2.2 Delete the crossorigin attribute

Re-examine the map requirements and determine whether the crossorigin attribute is really needed. If not, this problem will not occur at all

2.3 nginx proxy solution

If The previous methods feel inappropriate, so use nginx as a proxy. It can solve cross-domain problems and cache tiles locally to 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;
  
   # 关键代码块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;

     # 关键代码块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;
    }
  }

}

Let’s explain the configuration file:

Key code block 1:

1. Use nginx upstream to configure a set of service addresses for load balancing Use, the effect is better than openlayers sequentially traverse t0 to t6

2, set the proxy cache temporary address and cache address, here you can use the relative path

Key code block 2

After matching the dataserver, you need to

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

2. Use proxy_pass to proxy the address to http://tianditu_server/dataserver address on, where tianditu_server is the name of the service group configured with load balancing above.

The above is the detailed content of How to use nginx proxy map as cache to solve cross-domain problems. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:亿速云. If there is any infringement, please contact admin@php.cn delete
NGINX: An Introduction to the High-Performance Web ServerNGINX: An Introduction to the High-Performance Web ServerApr 29, 2025 am 12:02 AM

NGINX started in 2002 and was developed by IgorSysoev to solve the C10k problem. 1.NGINX is a high-performance web server, an event-driven asynchronous architecture, suitable for high concurrency. 2. Provide advanced functions such as reverse proxy, load balancing and caching to improve system performance and reliability. 3. Optimization techniques include adjusting the number of worker processes, enabling Gzip compression, using HTTP/2 and security configuration.

NGINX vs. Apache: A Look at Their ArchitecturesNGINX vs. Apache: A Look at Their ArchitecturesApr 28, 2025 am 12:13 AM

The main architecture difference between NGINX and Apache is that NGINX adopts event-driven, asynchronous non-blocking model, while Apache uses process or thread model. 1) NGINX efficiently handles high-concurrent connections through event loops and I/O multiplexing mechanisms, suitable for static content and reverse proxy. 2) Apache adopts a multi-process or multi-threaded model, which is highly stable but has high resource consumption, and is suitable for scenarios where rich module expansion is required.

NGINX vs. Apache: Examining the Pros and ConsNGINX vs. Apache: Examining the Pros and ConsApr 27, 2025 am 12:05 AM

NGINX is suitable for handling high concurrent and static content, while Apache is suitable for complex configurations and dynamic content. 1. NGINX efficiently handles concurrent connections, suitable for high-traffic scenarios, but requires additional configuration when processing dynamic content. 2. Apache provides rich modules and flexible configurations, which are suitable for complex needs, but have poor high concurrency performance.

NGINX and Apache: Understanding the Key DifferencesNGINX and Apache: Understanding the Key DifferencesApr 26, 2025 am 12:01 AM

NGINX and Apache each have their own advantages and disadvantages, and the choice should be based on specific needs. 1.NGINX is suitable for high concurrency scenarios because of its asynchronous non-blocking architecture. 2. Apache is suitable for low-concurrency scenarios that require complex configurations, because of its modular design.

NGINX Unit: Key Features and CapabilitiesNGINX Unit: Key Features and CapabilitiesApr 25, 2025 am 12:17 AM

NGINXUnit is an open source application server that supports multiple programming languages ​​and provides functions such as dynamic configuration, zero downtime updates and built-in load balancing. 1. Dynamic configuration: You can modify the configuration without restarting. 2. Multilingual support: compatible with Python, Go, Java, PHP, etc. 3. Zero downtime update: Supports application updates that do not interrupt services. 4. Built-in load balancing: Requests can be distributed to multiple application instances.

NGINX Unit vs. Other Application ServersNGINX Unit vs. Other Application ServersApr 24, 2025 am 12:14 AM

NGINXUnit is better than ApacheTomcat, Gunicorn and Node.js built-in HTTP servers, suitable for multilingual projects and dynamic configuration requirements. 1) Supports multiple programming languages, 2) Provides dynamic configuration reloading, 3) Built-in load balancing function, suitable for projects that require high scalability and reliability.

NGINX Unit: The Architecture and How It WorksNGINX Unit: The Architecture and How It WorksApr 23, 2025 am 12:18 AM

NGINXUnit improves application performance and manageability with its modular architecture and dynamic reconfiguration capabilities. 1) Modular design includes master processes, routers and application processes, supporting efficient management and expansion. 2) Dynamic reconfiguration allows seamless update of configuration at runtime, suitable for CI/CD environments. 3) Multilingual support is implemented through dynamic loading of language runtime, improving development flexibility. 4) High performance is achieved through event-driven models and asynchronous I/O, and remains efficient even under high concurrency. 5) Security is improved by isolating application processes and reducing the mutual influence between applications.

Using NGINX Unit: Deploying and Managing ApplicationsUsing NGINX Unit: Deploying and Managing ApplicationsApr 22, 2025 am 12:06 AM

NGINXUnit can be used to deploy and manage applications in multiple languages. 1) Install NGINXUnit. 2) Configure it to run different types of applications such as Python and PHP. 3) Use its dynamic configuration function for application management. Through these steps, you can efficiently deploy and manage applications and improve project efficiency.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool