[Javascript] CORS가 뭘까?

우리가 서버와 통신을 할때 겪는 문제중 가장 많이 겪는 문제가 있다

바로 cors이다!

 

이건 프론트가 요청을 보낼때 이상하게 error로 기어나와서 신경쓰이게 한다

 

그래서 이문제를 해결해보려고 cors를 공부해 보았다

---

CORS?

(Cross-origin resource sharing)로 교차 출처 리소스 공유로 

도메인이 다른 서버끼리 리소스를 주고 받을 때 보안을 위해 설정된 정책이다

 

쉽게 생각하자면 A에서 B로 데이터를 가져오려고 하는데 API서버 B에서 CORS허용 설정이 되어있지 않다면 
CORS오류가 발생한다.

 

기준이 뭘까?

우리가 하나의 문자열이라고 판단하는 이 URL은 사실을 이렇게 각각의 부분으로 나뉘어 판단할수 있다

두개의 출처가 서로 같다고 판단하는 로직은, 두 URL의 구성 요소 중 Scheme(프로토콜), Host(도메인), Port, 이 3가지만 동일하면 된다. 나머지는 달라도 CORS정책에 위반되지 않는다.

---

프론트가 고려해야할점

CORS오류가 10에 7은 백문제로 발생되는 문제지만, 

반대로 10의 3은 프론트문제로 발생하는 문제이다

 

우리의 웹브라우저가 이상하거나, 신뢰되지 않은 네트워크로 요청을 날리면 발생하고, VPN도 CORS 발생 요인중에 하나이다.

우리가 고려해야할 프론트의  문제는 요청을 잘못 날린경우에도 CORS오류가 발생한다

 

먼저 우리가 확인해야할것은 HTTP오청을 확인이다

위에 말한 것처럼 프로토콜과, 도메인, PORT가 동일해야 되는데 이것들이 다르면 앞서 말한 CORS오류가 뜬다

 

두번째는 요청이 누락된 경우다

이게 무슨소리냐?

서버에서는 GET, POST, DELETE이렇게 3개의 요청만 허용시켜놨는데 우리가 막 이상한 다른 요청을 보낼때

CORS오류가 발생한다

---

마지막으로

이번에 cors에 대해 대화를 나누었던 백엔드친구의 말을 가져와 보자면

'한줄로 요약하면 프론트는 http요청을 확인하고, 백은 체인순서가 잘못됐는지 확인하면 cors문제는 만사 ok다 '

나의 의견으론 cors문제는 프론트와 백의 소통이 원활하지 않아서 생기는 문제라고 봐도 무방하다고 생각한다.

우리가 처음 경험해봐서 생기는 문제이고, 처음 경험해봐서 생기는 시행착오중 하나이기 때문에 절대 두려워 하지말고, 문제를 천천히 보고 해결하면 된다.