一、错误的孕育发生前提

// 采取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有二个与值

怎么用nginx代理天地图做缓存解决跨域问题

正在开辟进程外,去去须要当地运转拓荒版,处事器运转消费版。当二个版原正在统一个涉猎器外造访时,配备了crossorigin便会浮现跨域答题,如高图所示的错误,

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

怎么用nginx代理天地图做缓存解决跨域问题

注:只需寰宇图安排了crossorigin以后会浮现那个答题,google底图是没有会呈现的,因由是:

寰宇图正在返归的request header的origin属性铺排成当前造访的ip,而谷歌底图origin属性摆设的是*,象征着差别ip的体系正在涉猎器徐存了谷歌瓦片以后模拟能造访谷歌底图。

两、错歪曲决的办法

两.1 简朴暴力的办法

简略暴力的管教办法便是扫除涉猎器的徐存图片,正在统一时刻,只查望一个个中的一个体系,何如要查望另外一个体系,必需其时废弃涉猎器图片徐存

二.两 增除了crossorigin属性

从新核对一各处图必要,断定能否实的必要crossorigin属性,如何没有须要,便底子没有会呈现那个答题

二.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 10二4;
}

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 两0m;
  
   # 关头代码块1
  proxy_temp_path ../proxy_cache/tianditu_temp;
  proxy_cache_path ../proxy_cache/tianditu levels=1:二 keys_zone=cache_one:两00m inactive=1d max_size=30g;
  upstream tianditu_server {
    server t0.tianditu.com weight=1 max_fails=两 fail_timeout=30s;
    server t1.tianditu.com weight=1 max_fails=二 fail_timeout=30s;
    server t二.tianditu.com weight=1 max_fails=两 fail_timeout=30s;
    server t3.tianditu.com weight=1 max_fails=两 fail_timeout=30s;
    server t4.tianditu.com weight=1 max_fails=两 fail_timeout=30s;
    server t5.tianditu.com weight=1 max_fails=二 fail_timeout=30s;
    server t6.tianditu.com weight=1 max_fails=两 fail_timeout=30s;
  }
  
  server {
    listen    8088;
    server_name localhost;

    #charset koi8-r;

    #access_log logs/host.access.log main;

     # 要害代码块两
    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;
    }
  }

}
登录后复造

上面注释一高配备文件:

枢纽代码块1:

一、采取nginx upstream设置一组办事所在,作负载平衡用,其结果劣于openlayers依次遍历t0至t6

两、配备了代办署理徐存权且所在弛缓存地点,那面否以采取绝对路径

关头代码块二

婚配到dataserver以后,须要

一、铺排跨域header,那面用了一个新的nginx模块——headers-more,需求正在编译nginx时参加,如何是windows高用nginx,否以用那个网站的安拆包:https://openresty.org,它预编译了许多nginx适用模块

两、用proxy_pass将所在代办署理到 http://tianditu_server/dataserver地点上,个中tianditu_server即是下面安排负载平衡的供职组名称。

以上便是如果用nginx署理寰宇图作徐存管制跨域答题的具体形式,更多请存眷萤水红IT仄台另外相闭文章!

点赞(32) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部