고정ip로 연동후 웹페이지에서 로그인 입력이 안됩니다. (리액트 프론트, 장고서버, 도커, NGINX, DB : PostgreSQL)

Question

### 문제 설명

리액트 프론트(포트 80)와 장고서버(포트 8000)를 만들고 고정 IP (52.79.65.21)로 연결했는데, 아래와 같은 콘솔 에러가 발생했습니다.

#### 콘솔 에러화면

The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.Understand this error
ContextWrapper.js:97 Error creating temporary user: nd
(anonymous) @ ContextWrapper.js:97Understand this error
localhost/api/customers/tempuser/temp-user/:1 
        
Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this error
localhost/api/token/:1

Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this error
Login.js:17

Uncaught (in promise) TypeError: Failed to fetch
    at onSubmit (Login.js:17:9)
    at Object.Ie (react-dom.production.min.js:54:317)
    at We (react-dom.production.min.js:54:471)
    at react-dom.production.min.js:55:35
    at Lr (react-dom.production.min.js:105:68)
    at Fr (react-dom.production.min.js:106:380)
    at react-dom.production.min.js:117:104
    at uc (react-dom.production.min.js:274:42)
    at De (react-dom.production.min.js:52:375)
    at Hr (react-dom.production.min.js:109:469)

### 시스템 구성

- 리액트 프론트엔드: 장고 내에서 빌드하여 장고를 기반으로 작동
- 장고서버: 포트 8000에서 작동
- 도커
- 데이터베이스: PostgreSQL
- NGINX

### 문제 상세

- AWS에서 SSL을 발급받아 적용하였으나, 고정 IP나 도메인 주소창에서 HTTPS 연결이 되어 있지 않다고 나옵니다.
- 회원 ID와 비밀번호 입력 시 서버에 전달되지 않습니다.

### 질문

1. NGINX 설정에서 CORS가 충돌하는 것 같습니다. 어떻게 해결해야 하나요?
2. 개발 단계에서 AWS에서 SSL을 발급받아 적용했지만, 리액트에서 장고로의 API 호출 시에도 SSL을 적용해야 하나요? 개발 시 SSL을 해제하고 진행해야 하는지 궁금합니다.

froguin · Answer

안녕하세요.

CORS 는 최근 브라우저들에서 웹 사이트를 표시할 때 다른 도메인에 있는 파일을 표시해 주어야 할 때 허용된 파일에 대해서만 정상적으로 접근할 수 있도록 설정이 필요한 부분입니다. 자세한 내용은 다음 사이트를 참고 부탁드리며, 해당 부분은 웹 사이트의 HTTP 헤더에서 허용할 도메인 정보와 함께 리턴되어야 합니다. Nginx 를 사용하고 계시니, Nginx 또는 Nginx 백단의 어플리케이션에서 응답할 수 있도록 해야 합니다.
https://aws.amazon.com/ko/what-is/cross-origin-resource-sharing/

SSL 인증서를 발급하여 적용 하셨다고 하셨지만, HTTPS 가 적용된 통신이라면 보통 도메인 이름으로 443 포트로 접근하시고, 브라우저에서도 적용된 인증서를 확인할 수 있어야 합니다. 고정 IP와 80 포트로 접근하셨다는 것은 HTTP로 통신하고 있을 것으로 예상되며, 그렇기 때문에 안전하게 통신중이라고 보기가 어렵습니다.

혹시 ACM 등의 서비스에서 발급받으신 인증서라면, ALB 등의 AWS 리소스에 설정하시고, 그 리소스를 통해 접근하시는 중일까요? Amazon 에서 발급하는 인증서는 파일 형태로 다운받을 수 없기 때문에 EC2 단일 인스턴스에서는 사용할 수 없습니다. EC2 에서 직접 사용하는 인증서가 필요하다면 다른 방법으로 준비하셔야 하며, 외부 3rd party 에서 판매하는 SSL 인증서를 구매하거나 letsencrypt 등에서 제공하는 인증서를 웹서버에 적용하셔야 합니다.

로컬에서 개발하실 때는 localhost 를 사용하시기에 예외처리가 되지만, 그 외의 경우는 HTTPS 로 도메인 기반으로 접근하셔야 이 부분을 해결할 수 있을 것입니다. 설정 정보를 다시 확인해 보시고 접근해 보시기 바랍니다.

고정ip로 연동후 웹페이지에서 로그인 입력이 안됩니다. (리액트 프론트, 장고서버, 도커, NGINX, DB : PostgreSQL)

문제 설명

콘솔 에러화면

시스템 구성

문제 상세

질문

관련 콘텐츠