Monthly Archives: December 2014

AngularJS $http 함수 CORS 설정

[2016년 1월 15일: 추기]
AngularJS에서 $http로 POST 요청(그리고 아마도 DELETE와 PUT도 마찬가지로)을 PHP 서버로 보내게 되면, $_POST에 아무것도 잡히지 않습니다. 이 경우에도 아래처럼 헤더를 변경(Content-Type만 변경해 주면 됩니다)해 주고, 데이터를 쿼리스트링으로 파싱하여 보내면 정상적으로 송신됩니다. 대체 왜…
[마침]

AngularJS 에서 기본설정으로 Cross-Domain 에 대해 AJAX 요청을 보내면 애석하게도 CORS에러가 발생합니다. 만일 프로젝트에 jQuery를 사용하고 있다면 $.ajax 함수를 이용해 비교적 간단하게 해결할 수 있습니다만, 프로젝트에 jQuery를 사용하지 않은 상황이라면 AJAX 통신만을 위해 중간에 jQuery를 도입하는 것도 좀 애매합니다. AngularJS 에서 $http 만으로 Cross-Domain에 대한 AJAX 통신을 위해서는 크게 두 가지 작업을 해야 합니다. 첫번째는 헤더의 변경, 두번째는 JSON 데이터를 URL 쿼리 문장으로 파싱하는 것입니다.

우선 헤더를 변경합니다. angular.module.config()가 위치한 파일(통상 app.js)에 $httpProvider를 인젝션하고 다음과 같이 헤더를 변경합니다.

angular
  .module('...', [...])
  .config(function ($httpProvider) {

    // $httpProvider에서 header 를 수정합니다.

    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

  });

다음으로 실제 $http로 데이터를 포함한 요청을 보낼때 데이터를 파싱합니다.

// JSON 형식을 쿼리스트링으로 파싱합니다.
var jsonToUrlString = function (json) {
  var string = '';

  string = Object.keys(json).map(function (key) {
    return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]);
  }).join('&');

  return string;
};

// cross-domain에 POST 요청을 날립니다.
var postRequest = function (jsonData) {
  jsonData = jsonToUrlString(jsonData);

  $http({
    url: apiUrl,
    method: 'POST',
    data: jsonData
  })
  .success(function (data) {
    // do something
  });
};

이 설정으로 Cross-Domain 에 성공적으로 통신을 할 수 있습니다. JSON 형식을 그대로 사용할 수 없을까해서 header의 Content-Type을 application/json으로 변경해서 시도를 해보기도 했지만 좌절되었습니다. JSON을 쿼리 스트링으로 파싱하지 않고 보내면 CORS 에러와 함께 500 error가 함께 딸려오는 상황을 볼 수 있습니다.