[네트워크] CORS 만나서 반가워!

Nice to meet you! CORS 😇

에러 발생

• localhost에서 https를 적용하고 네트워크 통신을 시작하니

• 아주 많은 에러가 나타났다

클라이언트에서 해결하는 방법은? 프록시 사용하기

• "cors-anywhere" proxy server

const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const apiUrl = 'https://example.com/api';

fetch(proxyUrl + apiUrl)
  .then(response => {
    // handle the response from the API
  })
  .catch(error => {
    // handle the error
  });

CORS.SH - A Fast & Reliable CORS Proxy for your websites

One CORS Proxy you'll ever need

https://cors.sh/

Cross Origin Resource sharing

• 한 사이트에서 주소가 다른 사이트로 요청을 보낼 때 자주 발생하는 오류

• 미리 어떤 설정을 해줘야 된다고… ?
• Postman은 되잖아?
• 어디에서 보낸 요청이 cors로 막히는가?
• 웹사이트, 즉 크롬 같은 브라우저에서 일어나는 문제 = 프론트 문제
• 브라우저가 요청을 막거든!
• 내가 개발하고 있는 사이트를 못 믿어서 막는 거지

• 특정 사이트의 특정 유저 정보를 빼내기 위해 수상한 사이트를 만듦
• 사이트를 그럴듯하게 만들어서, 여기에 접속하도록 함
• 내 브라우저에 이들의 js가 내 브라우저에 이상한 짓을 할 수도 있음
• 예를 들면 내 쿠키에 저장된 정보를 탈취할 수 있음
• 막고 있는 건 = SOP → Same origin Policy 동일 출처 정책 = 기본값 → 웹 생태계 다양해지면서 다른 사이트 간 요청이 활발해짐
• 풀어주는 건 = CORS 허용해주라!
• Cross origin : 다른 출처 간 리소스(데이터) 공유 가능
• 출처 = 보내는 웹 사이트, 받은 API 주소
• 합의된 출처에 한해서 합법화 한거 → CORS = 교차 출처 자원 공유 방식
• 조건: 백엔드 쪽에서 허락한 다른 출처를 미리 명시해둠
 

A 사이트 → B API 일어나는 일

• 다른 출처에서 요청을 보낼 때 header 에 origin 항목을 추가

• origin
• 요청하는 쪽의 scheme : 요청할 자원에 접근할 방법 (http, ftp, telnet ) = 프로토콜
• 도메인
• 포트

https:// <- scheme
 art-here.site  <- domain
:443 

• 서버는 res 헤더에 지정된 Access-Control-Allow-Origin 정보를 실어서 보냄

• 브라우저가 origin에서 보낸 출처값 = 서버의 답장 헤더 Access-Control-Allow-Origin에 있으면 ok!
• 토큰과 같이 사용자 식별 정보가 담긴 요청에는 조금 더 엄격
• 요청 옵션에

credentials: true

• 받는 쪽에서도 *(와일드카드)가 아니라

웹페이지 주소를 정확히 명시하고
Access-Control-Allow-Credentials 항목을 true
// GET, POST -> 심플 리퀘스트

preflight에서 허락 받아야 요청 가능 
// PUT, DELETE -> 프리플라이트 리퀘스트