CORS 에러를 해결하자, 어떻게? JSONP로!

서론

프로젝트에서 openAPI를 호출해서 사용하는 부분이 있었는데,

아니나 다를까 교차 출처 리소스 공유(CORS, Cross-origin resource sharing) 에러가 발생하였습니다.

(당연한거슬..)

 

 

 

자 그래서 이 문제를 천천히 해결해보았는데요..

일단 CORS 에러가 발생하는 이유는 브라우저는 서로 다른 도메인에 대한 요청을 보안상 제한하기 때문입니다.

즉, 내 사이트 (http://okayoon.com)에서 openAPI (https://api.ipify.org)로 요청을 하게 되는 경우 다른 도메인이기 때문에 CORS 에러가 발생합니다. 

 

그 다음 왜???? 제한하는지 간단히 이해하고 넘어가겠습니다.

JSON은 단순 데이터만이 아닌 Javascript 자체도 전달할 수 있는데, 이럴 경우에 해커나 나쁜사람들이 악성 스크립트를 보낼 수 있기 때문입니다. 그렇다면 정말 위험해 질 수 있겠죠.

 

그렇기 때문에 저의 상황에서는 당연히 CORS 에러가 발생했고,

이 문제를 해결하기 위해 JSONP 사용하도록 하겠습니다. 

그전에 JSON과 JSONP에 대해 간단히 알아보고 가겠습니다!

 

 

 

JSON (Javscript Object Notation) 

JSON은 '속성-값' 쌍 또는 '키-값' 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷입니다.

- 위키백과

 

예시

{
  "user": [
    {
      "name": "suzy",
      "age": "17"
    },
    {
      "name": "sunyoung",
      "age": "20"
    }
  ]
}

 

 

JSONP(JSON-P, JSON with Padding)

JSONP는 클라이언트가 아닌 각기 다른 도메인에 상주하는 서버로부터 데이터를 요청하기 위해 사용됩니다.동일-출처 정책을 우회하는 데이터의 공유를 가능하게 합니다.HTML <script> 요소는 외부 출처로부터 조회된 내용을 실행하는 것이 허용되어 있습니다.이러한 웹 브라우저의 특성을 이용해 JSON 데이터를 클라이언트가 지정한 콜백 함수를 호출하는 유효한 Javascript 문법으로 감싸 클라이언트에 전송합니다. 
외부 서비스는 JSON 데이터를 패딩하여 클라이언트에 보냅니다.

parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});

웹 브라우저는 이 데이터를 유효한 JavaScript 프로그램으로 받아들여 실행하고, 콜백 함수인 parseResponse가 실행되며 받아온 데이터를 처리할 수 있게 됩니다.

- 위키백과

 

 

 

즉, 브라우저에서 <script> 요소는 다른 도메인(스크립트 파일)에 임베드할 수 있기 때문에 보안상 제한되는 부분에 해당하지 않습니다. 그래서 JSONP는 이것을 이용해서 JSON 데이터를 한번 감싸서(padding) 클라이언트에 전송합니다.

JSONP는 jQuery에서 $.ajax() 스펙을 이용해서 간단히 구현할 수 있지만, axios에서는 지원하지 않기때문에 따로 JSONP 모듈을 설치하고 작업해야 합니다.

 

npm

npm i jsonp

// @see https://www.npmjs.com/package/jsonp

예시

// 사용법: jsonp(url, opts, fn)

// 사용 전
const res = await Axios.get('http://ipify.com/?format=json');

// 사용 후
await jsonp('//api.ipify.org?format=jsonp', null, (err, res) => {
  // .....
});

 

그 외의 방식으로 proxy로도 작업할 수 있습니다.

참고 https://velog.io/@hoit_98/SOP%EC%99%80-CORS