CORS 에러! 복습하기

 

 

이제 CORS 에러가 왜 발생하는지는 알겠는데, 왜 CORS 에러가 발생하는지를

더 심층적으로 공부해보기

 

* 먼저, CORS 에러는 어디에서 발생할까?

=> 다른 곳에서는(ex. postman) 잘만 get해서 데이터를 받아오는데

이상하게 '어디'서만 요청을 보내면 자꾸 발생하는 CORS !!!

 

그 '어디'가 어디일까?

 

-> '웹사이트'에서 AJAX 요청을 보냈을때마다 되지 않았다.

-> 그 말은 웹사이트를 여는 곳, 즉 , 브라우저 (ex. 크롬, 사파리) 에서 일어나는 문제인 것

 

 이건 서버에서 막는게 아니라 바로 '브라우저'에서 막는 것

(웅 요건 알고있었오)

 

  ** 그럼 왜 브라우저에서 Cross Origin 을 막는걸까?

 

먼저, 보통 사이트에 우리가 로그인을 하면 인증과 관련된 정보인 토큰이 브라우저에 저장이 되어있는데(토큰)

나쁜 넘이 나쁜 맘을 먹고 어떤 사이트에 접속을 하도록 유도를 해서 우리가

만약 그 사이트에 방문을 하게 되면 ( = 그 말은 즉슨, 그 넘이 만든 html, css, js가 실행된다는 것 )

그 넘이 브라우저에 있는 나의 '토큰'을 가지고 마치 내가 로그인한마냥 서버에서 나의 중요한 정보들을 요청하고 그걸 그넘의 서버로 전송시켜 개인정보를  빼올 수 있기 때문에 브라우저에서 이를 막는 것

 

 

" CORS "는 정확히 이걸 '풀어주는 역할'을 하는 거고

이러한 Cross Origin을 막는 것은 "SOP"이다. (Same Origin Policy)

 

 

한마디로 우리가 만낫던 시뻘건 'CORS'는

이 요청이 되게 하려면, CORS 를 허용해주세연 하는거임

 

Resource -> 주고 받아지는 데이터

 

디폴트값으로 브라우저가 Cross Origin을 막고 있으니, 

개발자들은 JSONP 등의 방식으로 이를 우회하는 꼼수를 쓰고 있었음

 

해결 방법 : 

백엔드 서버에서 CORS 옵션을 지정해놓으면 된다. 

 

 

브라우저는 다른 출처끼리의 요청이 보내질 때는

요청에 Origin이라는 header를 추가한다. 

 

what is header ? 

데이터가 다른 곳으로 전송될 때 데이터의 맨 앞에 붙은 보충 정보이다. 

받는 쪽의 IP 주소, 사용할 프로토콜이나 옵션 등이 담기는데 우편으로 치면 봉투 겉면에 적힌 내용

요청하는 쪽의 header에 scheme(요청할 자원에 접근할 방법-> 이를 테면 http, ftp, telnet등을 말한다)과 도메인, 포트가 담긴다. 

 

요청을 받으면 서버는 답장 헤더에 지정된 Access-Control-Allow-Origin 정보를 실어서 보낸다.

브라우저가 서버에서 받은 응답의 Origin이 똑같이 있으면 ㅇㅋ 하고 주는 것

 

 

[강의 내용 출처]

 

https://youtu.be/bW31xiNB8Nc