CORS 및 JSONP를 사용하여 원본 간 요청 수행

원본 간 요청 정보

원본 간 요청은 요청을 시작한 도메인과 다른 도메인에 대한 요청입니다. 보안상의 이유로 대부분의 웹 브라우저는 원본 간 요청을 차단합니다. 그러나 CORS(원본 간 리소스 공유) 및 JSONP 콜백을 사용하여 원본 간 요청을 수행할 수 있습니다.

REST API는 모든 원본의 AJAX 요청에 대해 CORS(원본 간 리소스 공유)를 지원합니다. 자세한 내용은 CORS W3C 권장 사항과 HTML 5 보안 가이드를 참조하세요.

http://example.com에 도달한 브라우저에서 보낸 샘플 요청은 다음과 같습니다.

$ curl -I https://api.github.com -H "Origin: http://example.com"
HTTP/2 302
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: ETag, Link, x-ratelimit-limit, x-ratelimit-remaining, x-ratelimit-reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval

CORS 사전 실행 요청은 다음과 같습니다.

$ curl -I https://api.github.com -H "Origin: http://example.com" -X OPTIONS
HTTP/2 204
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With
Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE
Access-Control-Expose-Headers: ETag, Link, x-ratelimit-limit, x-ratelimit-remaining, x-ratelimit-reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval
Access-Control-Max-Age: 86400

JSON-P 콜백

GET 호출에 ?callback 매개 변수를 전송하여 결과를 JSON 함수로 래핑할 수 있습니다. 일반적으로 브라우저가 웹 페이지에 GitHub 콘텐츠를 포함하고 도메인 간 문제를 해결하려는 경우에 사용됩니다. 응답에는 일반 API와 동일한 데이터 출력 및 관련 HTTP 헤더 정보가 포함됩니다.

$ curl https://api.github.com?callback=foo

> /**/foo({
>   "meta": {
>     "status": 200,
>     "x-ratelimit-limit": "5000",
>     "x-ratelimit-remaining": "4966",
>     "x-ratelimit-reset": "1372700873",
>     "Link": [ // pagination headers and other links
>       ["https://api.github.com?page=2", {"rel": "next"}]
>     ]
>   },
>   "data": {
>     // the data
>   }
> })

JavaScript 처리기를 작성하여 콜백을 처리할 수 있습니다. 다음은 시도해 볼 수 있는 최소한의 예입니다.

<html>
<head>
<script type="text/javascript">
function foo(response) {
  var meta = response.meta;
  var data = response.data;
  console.log(meta);
  console.log(data);
}

var script = document.createElement('script');
script.src = 'https://api.github.com?callback=foo';

document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>

<body>
  <p>Open up your browser's console.</p>
</body>
</html>

Link를 제외한 모든 헤더는 HTTP 헤더와 동일한 문자열 값을 갖습니다. Link 헤더는 미리 구문 분석되며 [url, options] 튜플 배열로 제공됩니다.

예를 들어, 다음과 같은 링크가 있습니다.

Link: <url1>; rel="next", <url2>; rel="foo"; bar="baz"

콜백 출력에서 다음과 같이 표시됩니다.

{
  "Link": [
    [
      "url1",
      {
        "rel": "next"
      }
    ],
    [
      "url2",
      {
        "rel": "foo",
        "bar": "baz"
      }
    ]
  ]
}

CORS 및 JSONP를 사용하여 원본 간 요청 수행

이 문서의 내용

원본 간 요청 정보

CORS(원본 간 리소스 공유)

JSON-P 콜백