React CORS error 해결 방법

React (Front-End) 와 PHP (Back-End) 간에 통신하는 기능으로 유투브 동영상을 시청하면서 타이밍해가면서 동작 여부를 확인하는데 안된다.

 

윈도우에서 React 를 설치하고, 윈도우에 AutoSet10 을 설치하고 http://localhost/php-react/insert.php 로 데이터 전송을 시도하면 같은 localhost 로 인식하여 MySQL DB에 데이터가 잘 저장된다.

 

윈도우에 CentOS 7.9 를 VirtualBox 를 이용하여 설치하고, Node.js 와 React 를 설치하고 PHP 도 같이 설치했다.

IPTIME 공유기 환경에서 http://192.168.1.20:3000 번으로 react 개발자 모드로 접속하고,

http://192.168.1.20/php-react/insert.php 로 접속을 했더니 에러가 발생한다.

 

80 포트와 3000번 포트가 서로 달라서 생기는 문제다.

일반적으로 브라우저는 보안 문제로 인해 동일 출처 정책(SOP, Same Origin Policy)을 따른다.

URL의 프로토콜, 호스트, 포트가 모두 같아야 동일한 출처로 볼 수 있는데, 예를 들어 abc.com 호스트에게 받은 페이지에서 cde.com 호스트로 데이터를 요청할 수 없다. 출처가 다른 호스트로 데이터를 요청하는 경우 CORS 정책을 위반하게 된다. 

 

Register.js 파일 내용

 

insert.php 파일 내용

 

문제 해결 방법

1. package.json  파일에 추가할 사항

 

2. Register.js 파일 수정사항

http://192.168.1.20 remove

3. Chrome Broswer 결과 확인

4. DB 테이블 확인

테이블에 저장이 잘 된 것을 확인할 수 있다.