데브코스 14주차 과제 TIL : CORS 에러

데브코스의 14주차 과제를 진행하면서 외부 API를 사용해보고 싶어서 네이버 클라우드 플랫폼의 papagoRomanizer을 사용했는데, CORS 에러로 애를 좀 먹었다.

CORS

CORS는 Cross-Origin Resource Sharing의 약자로, 직역하면 교차 출처 리소스 공유라고 해석할 수 있다. 여기서 출처(Origin)는 서버의 위치를 의미하는 데, 여기서 Url의 Protocol(https://)과 Host(velog.io), 그리고 포트번호를 포함하는 것이다. 그러나 velog의 url을 보면 포트번호가 생략되어 있는데, 이는 각 웹에서 사용되는 프로토콜의 기본 포트트번호(http: 80, https:443)가 정해져 있기 때문이다. 따라서 포트번호가 명시되어 있다면 포트번호까지 일치해야 같은 출처라고 일반적으로 판단되지만, 명확한 표준이 아니기 때문에 어떤 경우에는 다른 출처로 판단되기도 한다.

CORS 에러 해결법

그렇다면 CORS 에러는 어떻게 해결해야 할까?
CRA(Create React App)에서 CORS에러를 해결하는 방식은 아주 간단했다. package.json에서 "proxy":"https://openapi.naver.com"와 같이 "proxy":"링크"를 추가해주면 된다.

http-proxy-middleware를 이용해 proxy서버를 같이 생성하여 사용하는 방법도 있는데, 이 방법을 사용하면 여러 개의 proxy를 설정할 수도 있다.

참고사이트 Evans Library, LOTTS 블로그