详解nginx代理天地图做缓存解决跨域问题

这篇文章主要介绍了详解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 VPS云主机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有两个取值

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

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

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

天地图在返回的request header的Origin属性设置成当前访问的IP，而google底图Origin属性设置的是*，意味着不同IP的系统在浏览器缓存了google瓦片之后依然能访问google底图。

2、错误解决的方法

2.1 简单暴力的方法

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

2.2 删除CrossOrigin属性

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

2.3 nginx代理解决

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

直接上配置文件哈。

#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 - r e m o t e u s e r [ remote_user [ remoteuser[time_local] “KaTeX parse error: Expected 'EOF', got '#' at position 12: request" ' #̲ 'status b o d y b y t e s s e n t " body_bytes_sent " bodybytessent"http_referer” ’ # ‘“ h t t p u s e r a g e n t " " http_user_agent" " httpuseragent""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 u r i uri uriis_args$args; proxy_pass http://tianditu_server/DataServer; } }}

详解nginx代理天地图做缓存解决跨域问题相关推荐

iis7 php 403,详解Nginx 出现 403 Forbidden 的解决办法
本篇文章主要介绍了详解Nginx 出现 403 Forbidden 的解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Nginx 也是当前流行的一款轻量级服务器 ...
proxy代理的使用（解决跨域，配置多个代理）
proxy代理的使用(解决跨域,配置多个代理) 一.什么是代理字面意思就是类似中间商,开启代理,原理就是在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据, 利用服务器与服务器间,交互,不会 ...
详解nginx 代理多个服务器(多个server方式)
其中主要的是有两个server,每个server对应的被代理的服务器的不同.从而实现了nginx代理多个服务器的目的. user root; worker_processes 1;#error_log ...
用 nginx 代理 MailChimp API 并支持跨域
tl;dr nginx 既灵活方便,又功能丰富,可以帮助我们实现添加跨域头.URL 重写以及隐藏敏感信息等功能.本文介绍在使用 MailChimp 进行邮件营销中遇到的一个普遍问题,分析了浏览器发起跨 ...
jq跨域代理_用jQuery解决跨域访问
浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js ...
前后端分离，如何解决跨域（代理模式）、路由拦截（进入页面需要登录）以及请求拦截（登录TOKEN失效）等问题（初学者）
前端时间项目需要发布一个较大的版本,工作比较忙,加了好多个晚上的班,感觉自己有点缺氧了.最近稍微闲下来了,顺便调休了三天,刚刚给家里来了个大扫除,看着这干干净净的小家,心里顿时舒服了很多. 下面进入正 ...
从一份配置清单详解Nginx服务器配置
概述在前面<Nginx服务器开箱体验> 一文中我们从开箱到体验,感受了一下Nginx服务器的魅力.Nginx是轻量级的高性能Web服务器,提供了诸如HTTP代理和反向代理.负载均衡.缓存 ...
详解token已过期含义及解决方 token过期是否需要重新登录
详解token已过期含义及解决方 token过期是否需要重新登录Web应用和用户的身份验证息息相关,从单一服务器架构到分布式服务架构再到微服务架构,用户安全认证和授权的机制也一直在演进,下文对各个架构 ...
详解Nginx SSL快速双向认证配置(脚本)
这篇文章主要介绍了详解Nginx SSL快速双向认证配置(脚本),现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧目前遇到一个项目有安全性要求,要求只有个别用户有权限访问.本着能用配置解决就 ...

详解nginx代理天地图做缓存解决跨域问题

详解nginx代理天地图做缓存解决跨域问题相关推荐

最新文章

热门文章