[React] https 통신문제

 

 

리엑트로 클라이언트 부분을 룰루랄라 다 만들고 

 

서버와 데이터를 주고받으려는데 이게 뭐지?

 

CORS 에러가 발생했다.

 

 

분명 서버에 CORS 설정도 다 끝냈는데 왜 그럴까?

 

문제는 https통신에 있었다. 

 

서버 측에서 데이터를 주고받기 위해 https 통신을 사용하도록 되어 있는데 

 

react에서는 default 값으로 http 통신을 사용하는 듯하다. 

 

이에 대한 해결방법은 react를 시작할 때 https 통신을 사용할 것임을 알려 주는 것이다. 

 

package.json에서 npm start 설정을 아래처럼 수정하니 정상적으로 서버와의 통신이 이루어졌다. 

 

HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start

 

관련해서 공식문서에도 잘 설명되어 있으니 참고하길 바란다. 

 

https://create-react-app.dev/docs/using-https-in-development/

Using HTTPS in Development | Create React App