AngularJS AJAX Header 설정하기

AngularJS $http 서비스에서 커스텀 헤더를 설정하는 방법입니다. 인증 토큰, Content-Type 등 다양한 헤더 추가 방법을 다룹니다.

1. 개별 요청에 헤더 추가

// GET 요청
$http({
    method: "GET",
    url: "/api/users",
    headers: {
        "Authorization": "Bearer " + token,
        "X-Custom-Header": "value"
    }
}).then(function(response) {
    console.log(response.data);
});

// POST 요청
$http({
    method: "POST",
    url: "/api/users",
    headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer " + token
    },
    data: { name: "홍길동", email: "test@test.com" }
}).then(function(response) {
    console.log(response.data);
});

2. 단축 메서드에서 헤더

// $http.get
$http.get("/api/users", {
    headers: { "Authorization": "Bearer " + token }
}).then(function(response) {
    // 처리
});

// $http.post
$http.post("/api/users", data, {
    headers: { "Content-Type": "application/json" }
}).then(function(response) {
    // 처리
});

3. 전역 헤더 설정 ($httpProvider)

// config에서 설정
angular.module("myApp", [])
.config(function($httpProvider) {
    // 모든 요청에 기본 헤더 추가
    $httpProvider.defaults.headers.common["Authorization"] = "Bearer token";
    $httpProvider.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
    
    // POST 요청 기본 헤더
    $httpProvider.defaults.headers.post["Content-Type"] = "application/json";
});

// 런타임에 동적 설정
angular.module("myApp")
.run(function($http) {
    $http.defaults.headers.common["Authorization"] = "Bearer " + localStorage.getItem("token");
});

4. Interceptor로 헤더 추가

angular.module("myApp")
.factory("authInterceptor", function($q, $rootScope) {
    return {
        request: function(config) {
            var token = localStorage.getItem("token");
            if (token) {
                config.headers.Authorization = "Bearer " + token;
            }
            return config;
        },
        responseError: function(rejection) {
            if (rejection.status === 401) {
                $rootScope.$broadcast("unauthorized");
            }
            return $q.reject(rejection);
        }
    };
})
.config(function($httpProvider) {
    $httpProvider.interceptors.push("authInterceptor");
});

5. 폼 데이터 전송

// x-www-form-urlencoded
$http({
    method: "POST",
    url: "/api/login",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    transformRequest: function(obj) {
        var str = [];
        for (var p in obj) {
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
        return str.join("&");
    },
    data: { username: "user", password: "pass" }
});

6. 파일 업로드

// multipart/form-data
var formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("name", "document");

$http({
    method: "POST",
    url: "/api/upload",
    headers: { "Content-Type": undefined }, // 브라우저가 자동 설정
    transformRequest: angular.identity,
    data: formData
});

7. CORS 헤더

// 서버측 설정 필요
$http({
    method: "GET",
    url: "https://api.example.com/data",
    headers: {
        "Access-Control-Allow-Origin": "*" // 서버에서 설정
    },
    withCredentials: true // 쿠키 포함
});

자주 사용하는 헤더

헤더용도
Authorization인증 토큰
Content-Type요청 본문 타입
Accept응답 타입 지정
X-Requested-WithAJAX 요청 표시
X-CSRF-TokenCSRF 방지 토큰