[javascript] 액세스 제어 요청 헤더, jQuery를 사용하여 AJAX 요청의 헤더에 추가됨

jQuery의 AJAX POST 요청에 사용자 정의 헤더를 추가하고 싶습니다.

나는 이것을 시도했다 :

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

이 요청을 보내고 FireBug를 시청하면 다음 헤더가 표시됩니다.

옵션 xxxx / yyyy HTTP / 1.1
호스트 : 127.0.0.1:6666
사용자 에이전트 : Mozilla / 5.0 (Windows NT 6.1; WOW64; rv : 11.0) Gecko / 20100101 Firefox / 11.0
수락 : text / html, application / xhtml + xml, application / xml; q = 0.9, / ; q = 0.8
수락 언어 : fr, fr-fr; q = 0.8, en-us; q = 0.5, en; q = 0.3
수락-인코딩 : gzip, deflate
연결 : 유지 -alive
원점 : null
액세스 제어 요청 방법 : POST
액세스 제어 요청 헤더 : my-first-header, my-second-header
Pragma : no-cache
Cache-Control : no-cache

내 사용자 정의 헤더는 왜 가십니까 Access-Control-Request-Headers:

액세스 제어 요청 헤더 : my-first-header, my-second-header

다음과 같은 헤더 값을 기대했습니다.

My-First-Header : 첫 번째 값
My-Second-Header : 두 번째 값

가능합니까?



답변

Firefox에서 본 것은 실제 요청이 아닙니다. HTTP 메소드는 POST가 아니라 OPTIONS입니다. 브라우저가 도메인 간 AJAX 요청을 허용해야하는지 결정하기 위해 실제로는 ‘비행 전’요청이었습니다.

http://www.w3.org/TR/cors/

비행 전 요청의 Access-Control-Request-Headers 헤더에는 실제 요청의 헤더 목록이 포함됩니다. 그러면 서버는 브라우저가 실제 요청을 제출하기 전에 이러한 컨텍스트에서 이러한 헤더가 지원되는지 여부를 다시보고해야합니다.


답변

다음은 jQuery Ajax 호출에서 요청 헤더를 설정하는 방법의 예입니다.

$.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));
  }
});


답변

아래 코드는 저에게 효과적입니다. 나는 항상 작은 따옴표만을 사용하며 잘 작동합니다. 작은 따옴표 또는 큰 따옴표 만 사용해야 하지만 혼합해서는 안됩니다.

$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: YourData,
    success: function(data){
      console.log('succes: '+data);
    }
  });


답변

CORS 요청이 간단한 요청이 아니므 로 사용자 정의 헤더를 보내 므로 브라우저는 먼저 서버가 요청을 허용하는지 확인하기 위해 프리 플라이트 OPTIONS 요청을 보냅니다.

여기에 이미지 설명을 입력하십시오

서버에서 CORS를 켜면 코드가 작동합니다. 대신 자바 스크립트 가져 오기를 사용할 수도 있습니다 ( here )

다음은 nginx (nginx.conf 파일) 에서 CORS를 설정하는 구성 예입니다 .

다음은 Apache (.htaccess 파일) 에서 CORS 를 켜는 구성 예입니다.


답변

옵션이 브라우저에서 허용하는 것으로 제한되기 때문에 JavaScript로 봇을 만들 수없는 이유입니다. CORS 정책 을 따르는 브라우저를 주문할 수는 없으며 대부분의 브라우저가 따르는 다른 요청을 임의의 다른 출처로 보내 간단하게 응답을 얻을 수 있습니다!

또한 origin-header브라우저와 함께 제공되는 개발자 도구 와 같이 일부 요청 헤더를 수동으로 편집하려고 하면 브라우저가 편집을 거부하고 프리 플라이트 OPTIONS요청을 보낼 수 있습니다 .


답변

rack-cors gem을 사용해보십시오 . 그리고 Ajax 호출에 헤더 필드를 추가하십시오.


답변