jQuery를 사용하여 AJAX 요청에 헤더 추가

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를 켜면 코드가 작동합니다. 대신 js fetch를 사용할 수도 있습니다 ( here )

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=My-First-Header,My-Second-Header';


$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
}).done(function(data) { 
    alert(data[0].request.httpMethod + ' was send - open chrome console> network to see it');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

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

# ------------------------------------------------------------------------------
# | Cross-domain AJAX requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin AJAX requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

#Header set Access-Control-Allow-Origin "http://example.com:3000"
#Header always set Access-Control-Allow-Credentials "true"

Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

---

옵션이 브라우저가 허용하는 것으로 제한되기 때문에 Javascript로 봇을 만들 수 없습니다. CORS대부분의 브라우저가 따르는 정책 을 따르는 브라우저를 주문 하여 다른 요청에 임의의 요청을 보내고 단순히 응답을 얻을 수는 없습니다!

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

---

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

참고 URL : https://stackoverflow.com/questions/10093053/add-header-in-ajax-request-with-jquery