CORS

Origin

• URI 스키마(프로토콜), 호스트 네임(도메인), 포트번호의 조합
  • 위 세가지를 식별하여 모두 같다면 같은 Origin으로 인식함

• protocol
  • 통신 규약, 사용자가 서버에 접속할 때 통신할 방식 정의
  • HTTP(Hyper Text Transfer Protocol) : 웹 브라우저와 웹 서버가 서로 데이터(하이퍼 텍스트)를 주고 받기 위해 만든 통신 규약
  • HTTPS( HTTP + Secure) : HTTP에서 보안이 강화된 version
• host(domain)
  • IP에 이름을 부여한 도메인 네임 혹은 서버 컴퓨터 IP
  • 즉, 인터넷에 접속되어 있는 각 컴퓨터를 가리키는 주소
• port
  • 포트번호, 한 개의 컴퓨터에는 여러 개의 서버가 존재할 수 있음
  • 포트번호로 어떤 서버에 접속할 지 결정한다.
• path : 컴퓨터 내부에 있는 디렉토리 파일을 가리킴(자원의 경로 의미)
• query string: 데이터를 전달하는데 사용
  • 쿼리스트링의 시작은 “?” 이고, 각 key-value쌍은 “&”로 구분된다.

---

SOP(Same Origin Policy)

• 한 Origin으로 부터 로드된 document 혹은 script가 다른 Origin의 리소스와 상호작용 할 수 있는 방법을 제한하는 중요한 보안 메커니즘
• SOP로 인해 보안성이 높아지지만, 다른 Origin으로 부터 필요한 자원을 불러오는데 제한적임
  • HTML 태그의 경우 다른 Origin에서 오더라도 임베딩에 한해 허용해줌

---

CORS(Cross Origin Resource Sharing)

• 리소스를 공유할 수 있도록 만들어진 메커니즘
• 상호 간의 document 접근은 Origin이 다를 때 접근이 불가하거나 매우 제한적
  • CORS는 다른 Orign의 데이터를 불러오고 싶을 때 CORS의 표준을 지킴과 동시에 허용해 줌

CORS 동작

• 웹 어플리케이션이 다른 출처의 리소스를 요청할 때는 HTTP 프로토콜을 사용해 요청을 보내는데, 이 때 브라우저는 Origin 이라는 필드에 출처를 함께 담아 보냄
• 이후 서버가 응답할 때, 응답 헤더에 Access-Control_Allow-Origin이라는 값에 허용된 출처를 내려주고 브라우저는 이 값을 비교한 후 안전한 요청으로 간주함
• 1. Simple Request인 경우
  
  • HTTP Method가 GET, POST, HEAD 중 하나일 때
  • Content-Type이 아래중 하나일 때
    • text
    • application/x-www-form-unlencoded
    • mulipart/form-data
    → 브라우저가 받은 요청이 어떤 Origin에서 시작됐는지 헤더를 추가함
    서버는 받은 CORS 요청이 유효한지 여부를 Access-Control_Allow-Origin 헤더로 응답
• 2. Preflight Request인 경우
  • Simple Request가 아니며, HTTP Method가 PUT, DELETE 중 하나일 때
  • PUT, DELETE와 같은 메서드는 서버의 데이터에 영향을 줄 수 있기 때문에 요청을 보내기 전에 허용 여부를 먼저 검증함
  • 이 경우 브라우저는 요청을 한 번에 보내지 않고 사전요청과 본요청으로 나누어 서버로 전송
    • 여기서의 사전요청이 Preflight Request 이다.
    • 이 경우에 HTTP Method 중 OPTION 메서드가 사용 됨

 

CORS 에러 해결하기

1. 프록시 서버 사용(Client)

프록시 서버

• 인터넷에서 유저를 대신해 데이터를 가져오는 서버
• 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해줌
• 요청해야 하는 URL앞에 프록시 서버 URL을 붙여서 요청하게 되면, 클라이언트에서 서버로 리소스를 요청할 때 발생하는 CORS문제를 간단히 해결할 수 있다.

2. 라이브러리 사용(Client)

• http-proxy-middleware 라이브러리를 사용하면 로컬환경에 한해서 CORS 에러를 해결할 수 있음

3. Chrome 제한사항 제거(Client)

• 로컬환경에 한해서 CORS 에러를 해결할 수 있음

1. cmd 창 열기
2. chrome.exe 파일 위치 가기(cd)
   • C://Program Files /Google/Chrome/Application
   • C://Program Files (x86)/Google/Chrome/Application
3. 해당 위치에서 아래 코드 작성
   • chrome.exe --disable-web-security --user-data-dir=C:\Temp

4. Access-Control-Allow-Origin 헤더 세팅(Server)

• 서버 측에서 허용할 Origin을 Access-Control-Allow-Origin 응답 헤더에 넣어주면, 해당 Origin에서는 JSON 데이터와 같은 자원들을 응답하고 읽을 수 있다.