동일한 오리진 정책과 CORS

자주 보는 오류

Access to XMLHttpRequest at 'http://example:3000' from origin 'http://localhost:8080' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

동일한 오리진 정책(Same-Origin Policy)이란

CSRF등의 공격을 막기 위해서, 다른 오리진의 자원에의 액세스에 제약을 가할 생각이었다.

동일 오리진의 판정

프로토콜, 호스트, 포트 번호의 조합이 동일한 경우는 동일 오리진이 된다.

구체예로서 h tp // w w. 그래 mpぇ. 이 m 에 대해서는,

h tp // w w. 그래 mpぇ. 이 m/에아 mpぇ. pg//일치(패스가 다를 뿐)
htps //w w. 그래 mpぇ. 이 m/에아 mpぇ. pg//スキーム 불일치
htp://w w2. 그래 mpぇ. 이 m/에아 mpぇ. pg//ホスト 불일치
h tp // w w. 그래 mpぇ. 코 m:3000/에아 mpぇ. pg//ポート 불일치

IE의 경우 다음 두 가지 예외가 있습니다.

신뢰할 수 있는 영역: 두 도메인이 모두 신뢰할 수 있는 영역(예: 회사 도메인)인 경우 동일한 오리진 제한이 적용되지 않습니다.

포트 번호 : 동일한 오리진의 확인 요소에 포트 번호를 포함하지 않는다.

동일한 오리진 정책의 제약을 받는 WebAPI

XMLHttpRequest

Canvas

Web Storage

X-Frame-Options

동일한 오리진 정책의 제약을 받지 않는 자원 취득

script//스크립트

img, video, audio//미디어

object, embed, applet//플러그인

frame, iframe//다른 사이트의 콘텐츠

link, CSS (font-face) ://CSS, 웹 폰트 등

CORS(Cross-Origin Resource Sharing)란?

다른 오리진 간의 리소스 공유 기술

새 요청 헤더를 서버 측에서 추가하여 작동합니다.

Access-Control-Allow-Origin: https://example.co.jp  // 特定のサイトを許可する
Access-Control-Allow-Origin: *   // 全てのサイトを許可する
Access-Control-Allow-Headers "X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept"

CORS 지원 (단순 요청의 경우)

다음 조건을 모두 충족하는 경우 크로스 오리진 요청은 접수 가능

HTTP 메소드는 다음 중 하나입니다.

GET

POST

HEAD

HTTP 헤더에 다음 이외의 필드가 포함되지 않는다.

Accept

Accept-Language

Content-Language

Content-Type

DPR

Downlink

Save-Data

Viewport-Width

Width

Content-Type의 값은 다음 중 하나입니다.

application/x-www-form-urlencoded

multipart/form-data

text/plain

CORS 지원 (프리 플라이트 요청의 경우)

단순 요청과 다른 경우 프리 플라이트 요청 (Preflight Request)을 먼저 보내고,
실제로 요청해도 좋은지 확인한다.
아래의 경우 비표준 Ping-Other HTTP 요청 헤더를 설정했으므로,
프리 플라이트 요청의 통신이 먼저 이루어진다.

참고 : htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / u b / Ht tP / RS