액세스 제어 요청 헤더, 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 )

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 (.htaccess 파일) 에서 CORS 를 켜는 구성 예입니다.

# ------------------------------------------------------------------------------
# | 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을 사용해보십시오 . 그리고 Ajax 호출에 헤더 필드를 추가하십시오.