CORS 에러 분석

Rotti_Kim·2022년 11월 13일
0

WEB 공부

목록 보기
1/4
post-thumbnail

Cors Error

JSNOP란

2009년에 CORS가 나오기 전까지 다른 도메인에 비동기 요청을 하기 위해 사용되던 방법이다. 자바스크립트 파일 내에서 다른 도메인에 데이터를 요청할 경우 SOP에 위배되어 에러가 나게 된다. 예를들어, 'https://test.com'에서 요청을 보내면 https://test.com도메인을 가진 서버에만 요청을 보낼 수 있있다.

하지만, html파일내에 있는 태그를 이용하면 SOP를 피해갈수 있다. https://localhost에서 https://test.com (서로 다른 도메인)의 데이터를 가져올 수 있다. 다만 조건이 있다.

  1. 서버에서 Json형태로 데이터를 내려줘야함.
  2. script태그로 받아온 Json 데이터를 브라우저 어딘가에 저장해놔야 쓸 수 있음.

https://simsimjae.medium.com/cors와-jsonp에-대해서-aa3ec0456e97

SOP(Same-origin-policy, 동일 출처 정책)

자바스크립트 엔진 표준 스펙의 보안 규칙으로 하나의 출처(Origin)에서 로드된 자원(문서나 스크립트)이 host,protocol,port가 일치 하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하고 동일 출처(Same Origin)에서만 접근이 가능한 정책

Origin이란?

protocol + hostname + port를 합친 것을 말한다.

즉 cross origin = 다음 중 하나라도 다른 경우에 발생한다.

  • 프로토콜(http != https)
  • 도메인 domain.com, other-domain.com
  • 포트 번호(ex: 3000번 포트와 4000번 포트)

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)

다른 출처의 리소스를 불러오기 위해 그 출처에 올바른 Cors 헤더를 포함한 응답을 반환해야 한다. CORS는 웹페이지상에서 자바스크립트를 이용하여 XHR(XMLHttpRequest)을 다른 도메인으로 발생 시킬 수 있도록 해주는 기능을 가지고 있고 XHR 기반 cross-origin HTTP 요청을 이용하여 자원을 공유해야 하는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원한다.

cors 사용 이유

  • 클라이언트와 서버의 도메인을 따로 유지
  • 외부 API를 연동하여 사용할 때, app과 외부 api의 origin이 달라 자원 공유가 불가능한 상황 발생
  • Cors를 적용해서 보안 문제들을 예방하고 내가 허용하는 origin만 허용 가능

cors 동작방식

  1. 브라우저에서 HTTP header 에 origin 속성에 요청을 보내는 origin을 담아 서버에게 요청을 보낸다.
  2. 서버가 이 요청에 대한 응당을 할때, 응답헤더에 Access-Controll-Allow-Origin에 접근 허용된 origin을 담아 브라우저에게 응답을 보낸다.(모두 허용시 *)
  3. 두 개가 동일하다면 유용한 응답이라 판단한다.

cors 처리 방식 3가지

  1. Simple Request

    • GET 요청, HEAD, POST 중의 한 가지 방식을 사용
    • POST 방식일 경우 conte-type이 아래 셋 중 하나여야 한다.
      - application/x-www-form-unlencoded
      - multipart/form-data
      - text/plain
  1. Preflight Request

  2. Credentialed Request

SOP와 CORS의 상관관계

흔히 'CORS 해결'이라고 표현하기 때문에 CORS 자체가 이슈나 에러라고 착각하기 쉬운 것 같다.

CORS는 에러가 아니고 앞서 정리 했듯 서로 다른 origin 간에 리소스를 전달하는 방식을 제어하는 매커니즘이다.

CORS 이슈는 동일 출처 정책(SOP)에 의거해 다른 출처의 리소스를 사용하거나 상호작용을 하지 못하도록 막고 경고가 발생 하는 것 이고, 이를 해결하기 위해 교차 출처 리소스 공유(CORS)를 사용해 접근을 허용 하도록 설정하는 것이다.

그러니 'CORS 해결'을 더 명확하게 표현하면 'CORS 이슈 해결'이라 할 수 있겠다.

CORS 해결방법 및 실험

실험하기

(클라이언트)React.dev -> http://localhost:3000

(서버) nest.js -> http://localhost:4000

  1. enable_cors o / proxy o

/board로 path 설정 후 전송

결과: 3000번 포트도 먹고 4000번 포트도 먹음

  1. enable_cors x / proxy o

    /boards로 path 설정

    결과: 3000번 포트, 클라이언트 포트로 전송시 ok -> 프록시가 origin 자동으로 설정

http://localhost:3000 으로 설정

​ 결과: 프록시에서 설정한 주소와 매칭됨

http://localhost:4000 으로 path 설정

​ 결과: 에러 발생!

  1. enable_cors o / proxy x

정리하기

프록시: front 포트 - 3000

서버 direct: sever 포트 - 4000


크로스 오리진 정책이란 http 헤더에 근거한다. 해당 헤더는 도메인, 포트 등을 포함하는 오리진을 나타내는 서버를 허용하는 역할을 한다. 결론적으로 Cors에러는 서버에서 이를 명시하는가 아닌가에 따라 다르게 작동하며 에러를 나타내는 부분은 브라우저에서 처리한다.

주의 !

  • Fe 에서 주소 쓸때 "/about" 처럼 앞에 도메인 제거
  • Fe proxy: 3000
  • Be proxy: 4000 (자기 포트와 동일하게 명시해야함)
profile
세상의 문제를 기술적으로 해결하는 공학자

0개의 댓글