본문 바로가기

Linux

타 사이트를 NGINX Reverse Proxy를 사용중 CORS 에러 해결법은?

반응형

타 사이트를 NGINX Reverse Proxy를 이용해서 iframe에 넣어 보여주는데 iframe의 css를 수정해야 하는 상황이 생겼다. 부모 페이지에서 jquery로 수정하니 CORS 에러가 발생해서 해결법을 찾아 보았는데 생각만큼 쉽지가 않다.

 

NGINX 에서 가져올때 CSS 파일을 수정해서 넘기려고 했는데 검색능력이 부족한지 찾지를 못함

 

완전 해결은 안되고 이론적으로 될거 같은 방법

NginX 에서 CORS 허용 하는 방법

참고 사이트 : https://jay-ji.tistory.com/72

아직 테스트 안해 봤는데 될거 같기도 해서 일단 기록 차원에서 작성함

 

================================================================================

 

흠... 그래서 다시 열심히 구글링 하다가 발견한게 Nginx에서 header를 적용할때 원본 서버(나의 겨우 Django App)의 헤더가 있다면 저 설정만으로는 바뀌지 않는다는 스택오버플로우 내용을 확인 했다.

대충, proxy_hide_header 를 사용해야 하위 서버의 헤더 옵션에 Niginx 헤더 옵션을 적용할 수 있는 권한을 가져올 수 있다라는 내용이였다. proxy_hide_header를 사용하지 않은 value는 스택된다라고 한다.

1
2
3
4
5
location / {
    proxy_hide_header Access-Control-Allow-Origin;
    add_header 'Access-Control-Allow-Origin' '*';
    proxy_pass "블라블라블라"
}
cs

그래서 위처럼 설정을 해야 하위 서버의 헤더 옵션을 덮어 씌울수 있다.

그리고 API호출을 해보니 정상적으로 호출되는 것을 확인 할 수 있었다!!!!

 

================================================================================

 

현재 셋팅값은 아래와 같다.

	location /table {
			set_real_ip_from 1.2.3.4; /* 실제 주소로 */
			add_header 'Access-Control-Allow-Origin' '*';
			real_ip_header X-Forwarded-For;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header Connection "Keep-Alive";
			proxy_set_header Proxy-Connection "Keep-Alive";
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-For $remote_addr;
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_set_header X-NginX-Proxy true;
			proxy_set_header Authorization "";
			proxy_set_header X-Found-Cluster 59cef4ea6dd3442abe3c6a624f7b9573;
			proxy_pass https://cluster.kb.ap-northeast-2.aws.elastic-cloud.com:9243; /* 실제 주소로 */
	}

 

 

수정된 셋팅값은 아래와 같다.

	location /table {
			set_real_ip_from 1.2.3.4; /* 실제 주소로 */
			proxy_hide_header Access-Control-Allow-Origin;
			add_header 'Access-Control-Allow-Origin' '*';
			real_ip_header X-Forwarded-For;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header Connection "Keep-Alive";
			proxy_set_header Proxy-Connection "Keep-Alive";
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-For $remote_addr;
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_set_header X-NginX-Proxy true;
			proxy_set_header Authorization "";
			proxy_set_header X-Found-Cluster 59cef4ea6dd3442abe3c6a624f7b9573;
			proxy_pass https://cluster.kb.ap-northeast-2.aws.elastic-cloud.com:9243; /* 실제 주소로 */
	}

 

 

잘 되야 할텐데...

반응형