CORS 크로스 필드 와 Nginx 역방향 에이전트 크로스 필드 우열 비교

최근 에 앞 뒤 단 분리 프로젝트 에 관 한 글 을 쓴 후에 도 메 인 관련 방안 의 기본 원리 와 잘못된 부분 을 자주 볼 수 있 는 게시 물 을 썼 는데 주로 CORS 와 Nginx 의 역방향 대 리 를 포함한다.이 두 가지 방안 항목 은 모두 사용 되 고 있 으 며 각각 장단 점 이 있 습 니 다. 어떤 방안 을 구체 적 으로 사용 하 는 지 에 대해 여러분 의 관점 도 일치 하지 않 습 니 다. 본 고 는 주로 이에 대해 전개 하고 자 합 니 다. 앞 뒤 와 서버 설정, 안전성, 이식 유연성, 확장 성 등 측면 에서 두 가지 방안 의 장단 점 을 상세 하 게 비교 하여 후기 에 방안 의 선택 에 도움 이 되도록 합 니 다.
전단 설정
CORS 프로젝트: 도 메 인 을 뛰 어 넘 을 때 일부 브 라 우 저 는 기본적으로 쿠키 를 휴대 하지 않 습 니 다. 따라서 쿠키 를 휴대 하기 위해 xml. httprequest 의 withCrendetails 속성 을 설정 해 야 합 니 다. vue - resource 를 사용 할 때 다음 과 같이 설정 합 니 다.

Vue.http.options.credentials = true

axios 를 사용 할 때 차단기 에 다음 과 같이 설정 할 수 있 습 니 다.

axios.interceptors.request.use((config) => {
    config.withCredentials = true
    return config
}, (error) => {
    return Promise.reject(error)
})

원생 XML HttpRequest 대상 을 사용 할 때 는 다음 과 같 습 니 다.

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

쿠키 를 전달 할 필요 가 없다 면 false 로 설정 하 는 것 이 좋 습 니 다. 브 라 우 저 는 기본적으로 쿠키 의 휴대 가 허용 되 지 않도록 합 니 다.Nginx 역방향 에이전트: 이 때 전단 은 도 메 인 을 뛰 어 넘 지 않 고 정상 적 인 요청 과 일치 하 며 추가 설정 이 필요 없습니다.
백 엔 드 설정
CORS 방안: 백 엔 드 는 ACA 시리즈 헤 더 를 포장 해 야 합 니 다.

'Access-Control-Allow-Origin' '*';
'Access-Control-Allow-Credentials' "true"; 
'Access-Control-Allow-Headers' 'X-Requested-With';

이외에 추가 설정 이 필요 없습니다.Nginx 역방향 에이전트: 이 때 백 엔 드 는 도 메 인 을 뛰 어 넘 지 않 고 정상 적 인 요청 과 일치 하 며 추가 설정 이 필요 없습니다.
서버 설정
CORS 프로젝트: 없 음.Nginx 역방향 에이전트: 이 프로젝트 의 크로스 도 메 인 작업 은 모두 nginx 서버 에 집중 되 어 있 습 니 다. 설정 은 다음 과 같 습 니 다.

...
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Real-Port $remote_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
...
location /api {
   proxy_pass https://b.test.com; #              
   proxy_cookie_domain b.test.com  a.test.com; #   cookie，  request response    cookie
}       
...

원리 이동 nginx 역방향 에이전트 크로스 필드 기본 설정 과 일반적인 오류, nginx 설정 분석 클 라 이언 트 의 실제 IP 전달
안전성
CORS 프로젝트: 이 때 브 라 우 저 는 기본적으로 origin 속성 을 추가 하기 때문에 서버 에서 요청 소스 를 직접 찾 아 소스 를 제어 하고 블랙리스트 링크 를 차단 할 수 있 습 니 다.서버 도 메 인 이름과 포트 가 동시에 노출 됩 니 다.Nginx 역방향 에이전트: 역방향 에이전트 방안 에서 기본 origin 머리 를 사용 할 수 없 지만 X - Forward - for 머리 를 통 해 클 라 이언 트 와 각급 대리 ip 을 볼 수 있 고 어느 정도 의 역 추적 과 블랙리스트 차단 을 실현 할 수 있 습 니 다.역방향 프 록 시 에 서 는 내부 망 주소 로 인터페이스 서버 에 접근 할 수 있 기 때문에 어느 정도 인터페이스 서버 가 노출 되 지 않도록 보호 할 수 있 습 니 다.
이식 유연성, 확장 성
CORS 방안: 코드 나 설정 센터 에서 흑백 명단 설정 만 하면 이식 과 확장 이 편리 합 니 다.Nginx 역방향 에이전트: 서로 다른 환경 서비스 도 메 인 이름 이 일치 하지 않 을 수 있 기 때문에 nginx 설정 도 각각 다 르 기 때문에 이식 하기 가 쉽 지 않 습 니 다.확장 성에 대해 서 는 새로운 항목 이 인터페이스 서버 에 접근 해 야 할 때 nginx 에서 server 가 지정 한 도 메 인 이름 을 먼저 방문 한 다음 에 server 도 메 인 이름 에서 인터페이스 서버 로 대리 해 야 합 니 다. 예 를 들 어

server { 
    listen       8443;
    server_name  a.test.com;    
    client_max_body_size            100m;
        
    ssl ...

    location /micro{
        proxy_pass   https://b.test.com;  #    
        proxy_cookie_domain b.test.com a.test.com; #  cookie
        add_header 'Access-Control-Allow-Origin' 'htps://c.test.com';
        add_header 'Access-Control-Allow-Credentials' "true"; 
        add_header Access-Control-Allow-Headers X-Requested-With;
    }
}

이때 크로스 도 메 인 모델 이 바 뀌 었 습 니 다. 단순 한 a. test. com 에서 b. test. com 으로 역방향 대리 되 었 고 a. test. com 에서 b. test. com 과 c. test. com CORS 에서 a. test. com 으로 역방향 대리 되 어 b. test. com d 로 대리 되 는 상황 이 되 었 습 니 다.이것 은 좀 복잡 하지만 자세히 생각해 보면 알 수 있 을 것 이다.이것 은 의심 할 여지없이 후기의 유지 보수 원 가 를 증가 시 켰 다.
종합 대비
이상 을 종합 하면 우 리 는 대략 다음 과 같은 아이콘 을 얻 을 수 있다.
Item
CORS
Nginx 역방향 에이전트
코드 설정 - 전단
credentials=true
없다
코드 설정 - 배경
setHeader: ACA - Origin, ACA - Method, ACA - 자격 증명 등
없다
서버 설정
없다
Nginx 설정
이식 유연성
높 음, 추가 설정 필요 없 음
낮 고 모든 환경 설정 이 다 를 수 있 습 니 다.
안전성
소스 제어, 직접 트 레이스
X - Forward - For 트 레이스 다단 계 소스
새 항목 확장
흑백 리스트 제어
설정 을 업데이트 하면 도 메 인 모델 에 변화 가 생 길 수 있 습 니 다.
대비 결론
종합 적 으로 말 하면 공공 기초 서비스 에 대해 도 킹 과 관련 된 전단 프로젝트 가 비교적 많 고 개발 테스트 배치 환경 도 비교적 많 기 때문에 전체적으로 볼 때 저 는 여러분 들 이 CORS 방안 을 사용 하 는 것 을 추천 하 는 경향 이 있 습 니 다.한편, 대립 성 이 강 한 작은 프로젝트 에 대해 nginx 를 사용 하면 개발 원 가 를 낮 추고 빠 른 출시 를 할 수 있 습 니 다.구체 적 으로 사용 하 는 것 도 당연히 업무 의 실제 와 결합 하여 필요 에 따라 사용 해 야 한다.또한 Nginx 리 버스 프 록 시 방안 을 사용 할 때 내부 도 메 인 / ip 를 인터페이스 서버 의 입구 로 사용 하고 불필요 한 보안 문제 가 발생 하지 않도록 외부 에 노출 되 지 않도록 권장 합 니 다.
~ 이 편 이 끝 났 습 니 다 ~ 함께 토론 하 시 는 걸 환영 합 니 다 ~