


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
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.
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!

本篇文章给大家带来了关于nginx的相关知识,其中主要介绍了nginx拦截爬虫相关的,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。

高并发系统有三把利器:缓存、降级和限流;限流的目的是通过对并发访问/请求进行限速来保护系统,一旦达到限制速率则可以拒绝服务(定向到错误页)、排队等待(秒杀)、降级(返回兜底数据或默认数据);高并发系统常见的限流有:限制总并发数(数据库连接池)、限制瞬时并发数(如nginx的limit_conn模块,用来限制瞬时并发连接数)、限制时间窗口内的平均速率(nginx的limit_req模块,用来限制每秒的平均速率);另外还可以根据网络连接数、网络流量、cpu或内存负载等来限流。1.限流算法最简单粗暴的

实验环境前端nginx:ip192.168.6.242,对后端的wordpress网站做反向代理实现复杂均衡后端nginx:ip192.168.6.36,192.168.6.205都部署wordpress,并使用相同的数据库1、在后端的两个wordpress上配置rsync+inotify,两服务器都开启rsync服务,并且通过inotify分别向对方同步数据下面配置192.168.6.205这台服务器vim/etc/rsyncd.confuid=nginxgid=nginxport=873ho

nginx php403错误的解决办法:1、修改文件权限或开启selinux;2、修改php-fpm.conf,加入需要的文件扩展名;3、修改php.ini内容为“cgi.fix_pathinfo = 0”;4、重启php-fpm即可。

跨域是开发中经常会遇到的一个场景,也是面试中经常会讨论的一个问题。掌握常见的跨域解决方案及其背后的原理,不仅可以提高我们的开发效率,还能在面试中表现的更加

nginx部署react刷新404的解决办法:1、修改Nginx配置为“server {listen 80;server_name https://www.xxx.com;location / {root xxx;index index.html index.htm;...}”;2、刷新路由,按当前路径去nginx加载页面即可。

nginx禁止访问php的方法:1、配置nginx,禁止解析指定目录下的指定程序;2、将“location ~^/images/.*\.(php|php5|sh|pl|py)${deny all...}”语句放置在server标签内即可。

linux版本:64位centos6.4nginx版本:nginx1.8.0php版本:php5.5.28&php5.4.44注意假如php5.5是主版本已经安装在/usr/local/php目录下,那么再安装其他版本的php再指定不同安装目录即可。安装php#wgethttp://cn2.php.net/get/php-5.4.44.tar.gz/from/this/mirror#tarzxvfphp-5.4.44.tar.gz#cdphp-5.4.44#./configure--pr


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Linux new version
SublimeText3 Linux latest version

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
