Nginx 해결 CORS 크로스 도 메 인 솔 루 션

먼저 MDN 의 CORS 에 대한 정 의 를 읽 고 크로스 필드 의 의미 와 간단 한 요청 과 복잡 한 요청 등에 대한 정 의 를 알 아 봅 니 다.글 속 의 내용 은 군더더기 없 이 지금 해결 방안 을 말 하 다.
정 의 를 통 해 간단 한 요청 과 복잡 한 요청 의 차 이 는 복잡 한 요청 이 자동 으로 OPTIONS 의 예비 검사 요청 을 보 내 는 것 입 니 다. 요청 이 확인 되 어야 진정 으로 요청 을 보 내기 시작 합 니 다.
종합 하면 우 리 는 두 가지 문 제 를 해결 해 야 한다.
OPTIONS 요청 의 정확 한 응답
1. OPTIONS 요청 의 정확 한 응답
해결 방식 은 웹 서버 에서 도 해결 할 수 있 고 소스 코드 에서 도 해결 할 수 있다.문제 가 비교적 보편적 이기 때문에 우 리 는 웹 서버 에서 해결 하 는 것 을 선택 합 니 다. 다음은 Nginx 를 예 로 들 어 해결 방안 을 설명 하 겠 습 니 다.
접근 한 주소 가 / example 이 라 고 가정 하면 Nginx 설정 은 다음 과 같 습 니 다.

location /example {
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8080/;
  }

크로스 필드 문 제 를 해결 하기 위해 다음 과 같은 내용 을 추가 합 니 다.

location /example {
   if ($request_method = 'OPTIONS') {
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Max-Age 1728000;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
       add_header Access-Control-Allow-Headers  'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
       add_header Content-Type' 'text/plain; charset=utf-8';
       add_header Content-Length 0 ;
       return 204;
    }

    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8080/;
   }

설명:

if ($request_method = 'OPTIONS') {...}        OPTIONS  :
1、      Access-Control-Allow-Origin   * (         )
2、       Access-Control-Max-Age，      ，      OPTIONS   
3、       ，     
4、         0，    text/plain; charset=utf-8 ,        204    

이로써 OPTIONS 요청 의 정확 한 응답 이 완료 되 었 습 니 다.
2. 도 메 인 을 넘 어 정확 한 응답 을 요청 합 니 다.
다음 내용 을 추가 합 니 다:

location /example {
   if ($request_method = 'OPTIONS') {
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Max-Age 1728000;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
       add_header Access-Control-Allow-Headers  'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
       add_header Content-Type' 'text/plain; charset=utf-8';
       add_header Content-Length 0 ;
       return 204;
    }

   if ($http_origin ~* (https?://(.+\.)?(example\.com$))) {
     add_header  Access-Control-Allow-Origin $http_origin;
     add_header  Access-Control-Allow-Credentials true;
     add_header  Access-Control-Allow-Methods GET,POST,OPTIONS;
     add_header  Access-Control-Expose-Headers Content-Length,Content-Range;
   }

    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8080/;
   }

설명:

if ($http_origin ~* (https?://(.+\.)?(example\.com$))) {...},   origin      (                ) :
1、     Access-Control-Allow-Origin  $http_origin (         )
2、      Access-Control-Allow-Credentials  true ，        Cookie(         。     ，    true ，Access-Control-Allow-Origin        *)
3、       ，     

이로써 크로스 필드 요청 이 올 바 르 게 응답 되 었 습 니 다.
이상 은 크로스 도 메 인 요청 이 웹 서버 에 있 는 솔 루 션 입 니 다. 주로 OPTIONS 방법 에 응답 하고 허용 소스 를 추가 하여 해결 합 니 다.
물론 로 컬 개발 에서 웹 팩 - dev - server 의 proxy 옵션 을 이용 하여 도 메 인 문 제 를 신속하게 해결 할 수 있 습 니 다. 예 는 다음 과 같 습 니 다.
// webpack.congf.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
}

방문 주소 가 / api / foo? q = bar 일 때 프 록 시 를 통 해 방문 하 는 실제 주 소 는:http://localhost:3000/foo?q=bar