jQuery를 사용한 AJAX POST 요청의 사용자 정의 헤더

jQuery로 시작된 AJAX POST 요청에서는 사용자 정의 헤더를 포함할 수 있습니다. 그러나 헤더를 추가하는 메커니즘은 일반적인 접근 방식과 다릅니다.

예제와 같이 헤더를 지정하는 경우:

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
}).done(function(data) {
    alert(data);
});

이해컨대 헤더는 다음과 같이 전송될 것으로 예상됩니다.

My-First-Header: first value
My-Second-Header: second value

그러나 브라우저 보안 조치로 인해 초기 요청에서 사용자 정의 헤더 값을 직접 보내는 것이 방지됩니다. 대신 Access-Control-Request-Headers 헤더에 배치됩니다. 이는 사전 요청으로 알려진 보안 메커니즘입니다.

후속 요청에 실제 헤더 값이 포함되도록 하려면 서버에서 필요한 CORS(Cross-Origin Resource Sharing) 헤더를 구성해야 합니다.

이 문제에 대한 해결책은 주어진 샘플 코드에 표시된 것처럼 다른 방식으로 헤더를 보내는 것입니다.

$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("Authority", authorizationToken);
  },
  url: "entities",
  data: "json="   escape(JSON.stringify(createRequestObject)),
  processData: false,
  success: function(msg) {
    $("#results").append("The result ="   StringifyPretty(msg));
  }
});

이 접근 방식은 실제로 Access-Control-Request-Headers 배치를 우회하여 요청 헤더 값을 직접 설정합니다. 서버 구성 없이 초기 요청과 함께 사용자 정의 헤더를 보내는 방법을 제공합니다.