서버에 코드를 올렸는데 mixed content에러 발생중입니다.

[리뉴얼] React로 NodeBird SNS 만들기

작성

안녕하세요. 제로초님.

우선 학습관련 내용이 아닌 내용에 대해 질문드리게 되어 죄송합니다.

혹여 문제가 될 시 질문 글을 삭제하도록 하겠습니다.

몇 일 동안 해결하려 했으나 해결이 잘 되지 않아 이 곳을 통해 질문드리게 되었습니다.

fe작업물을 테스트 서버에 반영하였으나,

로그인을 시도할 때

아래와 같은 에러가 발생중입니다.

xhr.js:247 Mixed Content: The page at 'https://도메인주소/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://백엔드api주소'. This request has been blocked; the content must be served over HTTPS.

구글링을 해본 결과 메타 태그를 index.html에 삽입하라고 하여 삽입을 해보았으나,

pending로 통신 자체가 불가능한 상황입니다.

http-proxy-middleware 라이브러리를 사용하여 setproxy.js파일도 세팅을 해보았으나 여전히 위와 같은 문제가 발생중입니다.

.env 파일을 생성하여 백엔드 api를 프록시로 설정을 하였고, 프론트엔드 host도 지정을 하였는데 위와 같은 문제가 발생 중입니다.

도무지 해결이 되지 않아 여기 질문드린 점 다시 한번 사과드리겠습니다.

혹여 문제가 되면 질문 글은 바로 삭제하도록 하겠습니다.

react redux node.js express next.js

답변 2

김명찬

감사합니다.

한번 수정을 해보겠습니다.

강의 외 질문이라 안좋은 선례가 될 듯 하여

제로초님께 감사 인사만 드리고,

30분 뒤에 삭제하도록 하겠습니다.

제로초(조현영)

지식공유자

백엔드 주소가 http로 시작하는데요. 백엔드는 왜 https가 아닌가요?

김명찬

죄송합니다.

금방 막 제로초님 질문 올리는 영상을 보았습니다. 조금 더 보강해서 질문 다시 드리겠습니다.

김명찬

.env 파일에는 아래와 같은 코드를 작성하였습니다.

REACT_APP_BACKEND = 'http://백엔드api주소'

WDS_SOCKET_PORT=0 -> 웹소켓 연결 에러도 발생하였으나, 이 코드를 작성하였더니 일단 에러는 해결되어서 추가하였습니다.

PORT=8081 -> 프론트엔드 포트

setupProxy.js 코드는 아래와 같이 작성을 하였습니다.

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: process.env.REACT_APP_BACKEND,
      changeOrigin: true,
    })
  );
};

김명찬

백엔드 주소가 http로 시작하는데요. 백엔드는 왜 https가 아닌가요?

-> 이 부분에 대한 말씀을 이해를 못했습니다.

백엔드는 모두 http로 작성을 하였고, nginx를 통해 리다이렉팅이 되는 중이라고 백엔드로부터 이야기를 들었습니다.

제로초(조현영)

지식공유자

백엔드 주소가 https 로 시작해야 저 에러가 사라집니다.

김명찬

백엔드 주소가 https 로 시작해야 저 에러가 사라집니다.

이 백엔드 주소가 도메인 주소가 아닌, 백엔드 통신하는 Api를 말씀하시는게 맞나요?

그럼 백엔드로부터 api를 모두 http에서 https로 수정해달라고 요청하는게 맞나요?

제로초(조현영)