CORS.

CORS,SOP

웹브라우저의 내장된 보안정책이다 .
쉽게 한번 풀어보려고한다.

 

cors 를 알기전에 Origin(출처)를 알고가자

 

Origin(출처)?

http://localhost:3000/

http : 프로토콜.

localhost : 호스트.

3000 : 포트번호.

SOP(Same-Origin Policy)

웹브라우저의 보안 정책으로
말 그대로 “같은 출처에서만 리소스를 서로 공유할 수 있다”라는 규칙을 가진 정책이다.

쉽게말해서,
같은 도메인이어야 통신을 할 수 있다 라는 내용이다.

그럼 cors는 c=cross  다른 출처 리소스 아니겠는가?
그렇다는건 도메인이 다르면  CORS 정책 위반으로 인해 에러가 발생한다.

 

 

ex)

 

민수는 백엔드개발자이고,

 

민수의 집주소는 http://localhost:5000/ 이다.


http://localhost:3000/ 현재시점 의 브라우저 주소 
브라우저가 민수집에 택배를 보내려고한다.
민수 집주소 : http://localhost:5000/

CORS 정책 위반으로 인해 에러가 발생한다.

도메인이 다르기 때문에 택배를 보낼수가 없네

오류의 해결방법은 여러개가 존재한다.

1.민수(백엔드) 한테 cors제어 요청.

민수(백엔드) 코드

 

2.프론트엔드 개발자가 프록시 서버 사용하기

왜 프록시 서버를 사용할까

 

프록시서버 -> 백엔드서버
서버끼리의 통신은 same-origin이든 , cross-orgin이든 상관없기때문
즉, 도메인이 달라도 cors 정책 위반이 아니라는 말이다. (브라우저에서 벗어났기때문) 

*요청시   
axios.post('/api/user', { data });

즉, https://youtube.gooleapis.com/youtube 여기 주소로 요청을 보내는 것들은 주소를 
https://youtube.gooleapis.com/youtube으로 취급하겠다.

 

baseURL 에 (https:// ,http:// 로 시작하는) 형태의 URL 을 작성하지 않으면 알아서 요청이 Proxy로 간다.

흐뭇

도메인/api 확인

 

---

 

현재 프론트서버 3090 이라고 가정.

 

프록시 서버를 거치면 같은 도메인에서 보내준것 처럼 보이게 해서 한다. (출처가 같음)
고로, 3095 -> 3095 요청

http://localhost:3090/api/users 실제는 이렇게 찍힘