현상
웹 개발을 하면서 CORS (Cross-Origin Resource Sharing) 정책 오류는 매우 자주 마주치는데 이번에 발생한 문제는 서버로부터 응답이 차단되었다는 것을 의미한다. 전체 오류 메시지는 아래와 같다.
| Access to fetch at 'http://127.0.0.1:3000/api/admin/custom/gen-script?type=1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. |
원인
http://localhost:3000 으로 부터 요청이 Block되었다는 오류메시지이다.
fetch를 수행한 주소는 http://127.0.0.1:3000/api/~ 로 되어있지만 응답을 받은 주소는 http://localhost:3000/~로 두 주소가 상이하기에 Block이 된 것으로 보인다.
웹 프론트에서 현재 fetch의 주소는 환경변수에서 읽어오는 것이며, <.env.development>파일의 변수값을 보면 아래와 같이 되어있었다.
REACT_APP_WEB_BASE_URL=http://127.0.0.1:3000
REACT_APP_WEB_BASE_PROXY_URL=http://127.0.0.1:80
해결방법
변수에 설정된 주소를 아래와 같이 변경했다.
REACT_APP_WEB_BASE_URL=http://localhost:3000
REACT_APP_WEB_BASE_PROXY_URL=http://localhost:80
'좌뇌 > Web' 카테고리의 다른 글
| (Reflex) AWS-EC2 certbot 사용하여 무료로 'https' 적용하기 (0) | 2024.09.09 |
|---|