CORS

Cross Origin Resource Share

개요

클라이언트와 서버를 독립적으로 운영하다보면, 가장많이 발생하는 이슈가 CORS 이슈이다.

매번 CORS에 대해 처리 시, 환경마다 통신이 안되는 경우가 발생하여 이번에 제대로 파악해보고자 한다.

 

CORS 종류

• Simple Request
• Preflight Request
• Credential Request
• Non-Credential Request

Simple Request

1. GET, HEAD, POST 중 한 가지 방식을 사용

2. POST일 경우 Content-type이 아래 셋 중 하나를 만족

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

3. 커스텀 헤더를 전송하지 않아야 함

Simple Request는 매우 간단한 형태로 요청되고 응답됩니다. 

서버측에 아래 설정만 해주면된다.

Access-Control-Allow-Origin: * ("*" 사용가능)

 

Preflight Request

브라우저에서 Preflight(예비) 요청을 먼저보내 서버가 응답이 가능한지 확인합니다.(HTTP Method : OPTIONS)

서버응답이 가능하면 실제 요청을 보냅니다.

Preflight(예비)요청에 대한 응답 시 서버측에서는 reasponse header에 Allow 설정을해줘야합니다.

1. Preflight Request는 위의 Simple Request에 해당하는 조건에 만족하면 안된다.(PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH...)

2. 커스텀 헤더설정 가능.

3. 서버측에 아래 부분을 설정해주어야한다.

• Access-Control-Allow-Origin: http://foo.example ("*" 사용가능)
• Access-Control-Allow-Methods: POST, GET, OPTIONS
• Access-Control-Allow-Headers: Content-Type

 

Credential Request

HTTP Cookie와 HTTP Authentication 정보를 인식할 수 있게 해주는 요청.

클라이언트와 서버간의 쿠키정보나 세션정보까지 공유할경우 사용해야한다.

아래설정을 클라이언트측과 서버측에 해주어야합니다.

• xhr.withCredentials = true
• Access-Control-Allow-Credentials: true

 

Non-Credential Request

withCredentials : false 인경우

 

참고사항

1. IIS 경우 OPTIONS 가 제한되어있는경우가 있어 web.config 파일에 아래설정

<handlers>

<remove name="OPTIONSVerbHandler" />

<add name="OPTIONSVerbHandler" path="*" verb="OPTIONS" modules="IsapiModule" scriptProcessor="C:\Windows\System32\inetsrv\asp.dll" resourceType="Unspecified" requireAccess="None" />

</handlers>

 

2. Preflight 할 경우, 인증정보만 response header에 내려주고 작업을 끝내야한다. 

그리고, 루프백으로 실제 요청을 할때도 response header에 셋팅하고 실제작업을 진행해야한다.