nginx 프록시 맵을 캐시로 사용하여 도메인 간 문제를 해결하는 방법

1. 오류 발생 조건

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

crossorigin 속성을 사용하지 않으면 크로스 도메인 문제가 발생하지 않으며 일반적으로 이 매개 변수가 설정되지 않습니다.

이 매개변수의 사용 시나리오는 아래 공식 웹사이트에 설명되어 있습니다.

로드된 이미지에 대한 crossorigin 속성 webgl 렌더러를 사용하거나 다음을 사용하여 픽셀 데이터에 액세스하려는 경우 crossorigin 값을 제공해야 합니다. 캔버스 렌더러. 자세한 내용은 https://developer.mozilla.org/en-us/docs/web/html/cors_enabled_image를 참조하세요.

mdn 문서(https://developer.mozilla.org/zh)를 확인하세요. -cn/docs/web/html/cors_settings_attributes), crossorigin에는 두 개의 값이 있음을 알 수 있습니다. ​​​​

개발 프로세스에서 개발 버전을 로컬에서 실행하고 프로덕션 버전을 로컬에서 실행해야 하는 경우가 종종 있습니다. 섬기는 사람. 동일한 브라우저에서 두 버전에 액세스하는 경우, 아래 그림에 표시된 오류와 같이 crossorigin이 설정된 경우 도메인 간 문제가 발생합니다.

has beenblocked by cors 정책: no 'access-control-allow-origin' 헤더가 요청한 리소스에 존재합니다.

참고: 이 문제는 Tiantu가 crossorigin을 설정한 후에만 발생합니다. Google 기본 지도는 표시되지 않습니다. 이유는 다음과 같습니다.

Tiantu가 반환된 요청 헤더의 원본 속성을 설정합니다. 현재 액세스된 IP로 설정되고 Google 기본 지도의 원본 속성은 *로 설정됩니다. 즉, 브라우저가 Google 타일을 캐시한 후에도 다른 IP를 가진 시스템이 계속해서 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 - $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;
    }
  }

}

다음은 구성 파일에 대한 설명입니다.

키 코드 블록 1:

1. nginx 업스트림을 사용하여 로드 밸런싱을 위한 서비스 주소 세트를 구성합니다. 효과는 t0에서 t6까지의 openlayers 순차 탐색보다 낫습니다.

2. 프록시 캐시 임시 주소와 상대 경로를 설정할 수 있습니다.

키 코드 블록 2

데이터 서버를 일치시킨 후

1. 여기서는 새로운 nginx 모듈이 사용됩니다. nginx를 컴파일할 때 headers-more를 추가해야 합니다. nginx를 Windows에서 사용하는 경우 이 웹사이트(https://openresty.org)의 설치 패키지를 사용할 수 있습니다. nginx 실용적인 모듈

2. Proxy_pass를 사용하여 Proxy 주소를 http://tianditu_server/dataserver 주소로 변경합니다. 여기서 tianditu_server는 위에서 로드 밸런싱으로 구성된 서비스 그룹의 이름입니다.

위 내용은 nginx 프록시 맵을 캐시로 사용하여 도메인 간 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!