[Javascript] CORS가 뭘까?

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

바로 cors이다!

 

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

 

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

---

CORS?

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

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

 

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

 

기준이 뭘까?

우리가 하나의 문자열이라고 판단하는 이 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문제는 프런트와 백의 소통이 원활하지 않아서 생기는 문제라고 봐도 무방하다고 생각한다.

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