[CORS 해결하기] CORS란?

❗❗ CORS는 모르면 웹 개발자가 아니다!

실제 전기차관련 프로젝트 수행시 접했던 CORS 문제를 접하고 해결하면서 작성한 글입니다.!

 

1. 웹 개발자 “파트로”는 전기차량에 관심을 가지게 됐다.

전기차량에 관한 정보를 웹사이트에 띄우기로 했다.

 

2. 프론트 작업으로 레이아웃이 완성이 되었다.

이제 전기차 정보를 가지고 오기 위해 (프론트에서)

공공데이터 포털에서 전기차 데이터를 요청해서 받았다.!

 

3. 근데 다음과 같은 매운맛을 보게 되었다.!

내 로컬 http://localhost:3000에서  Api 서버 주소로 연결을 요청했다.

하지만 위와 같은 문구로 오류 메세지를 반환해줬다. (처음보는 에러라 많이 당황했다...)

에러에서 'CORS' 와 'Access-Control-Allow-Origin' 라는 문구를 볼 수 있다.

이와 관련해서 다뤄보자.

 

💡핵심만 먼저 말하면 요청한 도메인(localhost:3000)과 Api 서버의 도메인(http://apis.data.go.kr/~) 이 달라서 생기는 문제이다. 

---

❓ CORS에러가 무엇인가 ❓

CORS는 SOP를 위반한 에러이다!

SOP(same-origin policy, 동일 출처 정책) : 출처가 동일한 프로토콜, 포트번호, 도메인에서만 자원을 사용가능 하도록 하는 보안정책이다.  

 

즉, CORS 에러는 요청 브라우저에서 다른 도메인(프로토콜, 포트번호)을 가지는 서버로 요청이 갈때 브라우저에서 발생하는 보안정책이다. (서버 정책x)

 

그림을 통해 쉽게 알아보자.

이해를 위한 그림

요청한 출처와 API의 서버의 출처가 다르기 때문에 브라우저에서 CORS 에러가 생긴다.

 

출처가 다른 경우란? Internet Explorer 예외사항 😠

1. 프로토콜이 다른경우 (http, https가 동일해야한다. http->https는 가능하지만 반대의 경우 에러)

2. 도메인이 다른경우 요청 (www.naver.com - www.daum.net)

3. 포트번호가 다른경우 (www.naver.com:3000 - www.naver.com:8080)

* 경로는 상관없다 ex) www.naver.com  - www.naver.com/webtoon/list.nhn?titleId=703846&weekday

---

❓ 왜 이러한 정책이 있나 ❓

애초에 웹은 사용자의 공격에 너무나 취약하다. 흔히 알고 있는 SQL Injection, CSRF, XSS 등이 있다.

 

웹사이트에 개발자 도구로 확인하면 흔하게 script코드를 볼 수 있다.

물론 난독화가 되어 있지만 암호화는 되어 있지 않다.

이런 경우 사용자가 악의적으로 script를 추가해서 다른 사이트를 요청하게 되면

보안측면에서 너무나도 취약하다는 것을 알 수 있습니다.

csrf나 xss도 script코드를 활용한 해킹 기법이기 때문에 이런 기법은 당연히 막아야한다. 때문에 sop정책이 나온것이다.

---

 

❓ 브라우저는 어떻게 확인할까 ❓

 

기본적으로 웹 클라이언트 어플리케이션이 다른 출처의 리소스를 요청할 때는 HTTP 프로토콜을 사용하여 요청을 보내게 되는데, 이때 브라우저는 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아 보낸다.

이후 서버가 이 요청에 대한 응답을 할 때 응답 헤더의 Access-Control-Allow-Origin이라는

값에 “이 리소스를 접근하는 것이 허용된 출처”를 내려주고,

이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을

비교해본 후 이 응답이 유효한 응답인지 아닌지를 결정한다.

 

그림에서는 Orgin에 별표시가 되어있습니다. 이는 모든 주소를 허용한다는 의미이고 그래서 위의 그림에서는 정상적으로요청이 이루어졌습니다.

---

❓ 그래서 CORS 해결방법은 무엇인가? ❓

1. 요청시 JSONP를 활용한다. -> get 요청만 가능...

2. 미들웨어 CORS 추가. -> 서버설정을 직접할 수 가 없다...

3. 백엔드 서버를 거친다. -> 개발자가 구축하면 되서 확실하다.!

4. 프록시 서버 구축 -> 실무에서 많이 사용한다고 한다.

 

등의 해결 방식이 있었지만, 외부 데이터 서버를 직접 설정을 할 수 없었기에

백엔드 서버를 통해 우회하여 해결했다.

이해를 위한 그림

즉 가운데 백엔드 서버를 두는 것이다. 이 방법은 개발자가 서버를 구축해서 데이터를 받아와 프론트로 뿌려주면 되기 때문에 가장 확실한 방법이다.!

 

그 후 백엔드 서버에서 access-Control-Allow-orgin: http:www.파트로.com, localhost:3000 으로 지정을 해주거나

* 을 통해 모든 URL에 대해 가능하게 설정을 해주면 된다.

백엔드 프레임워크마다 다르므로 해당 키워드로 검색해서 해결하면 된다.

(저희의 경우 같이 작업하던 백엔드 개발자에게 요청하여 해결했습니다.)

위와 같은 방법으로 해결 후 정상적으로 data를 받아왔다!.

---

 

📃참고 사이트

www.youtube.com/watch?v=7iGIfcEsc2g

ddulgi.tistory.com/9

https://evan-moon.github.io/2020/05/21/about-cors/