액세스 제어 요청 헤더, 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/yyy 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/module, application/xhtml+xml, application/xml;q=0.9,/;q=0.8
Accept-Language: fr,fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
접속: 킵얼라이브
원본: null
액세스 제어 요구 방식: POST
액세스 컨트롤 요구 헤더: 첫 번째 헤더, 두 번째 헤더
플러그마: 캐시 없음
캐시 제어: 캐시 없음

커스텀 헤더는 왜 다음 주소로 이동합니까?Access-Control-Request-Headers:

액세스 컨트롤 요구 헤더: 첫 번째 헤더, 두 번째 헤더

다음과 같은 헤더 값을 예상했습니다.

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

가능합니까?

다음으로 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);
    }
  });

Firefox에서 확인한 것은 실제 요구가 아닙니다.HTTP 메서드는 OPTIONS이며 POST가 아닙니다.크로스 도메인 AJAX 요청을 허용해야 하는지 여부를 결정하기 위해 브라우저가 실제로 실행하는 것은 '사전 비행' 요청입니다.

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

프리플라이트 요구의 Access-Control-Request-Headers 헤더에는 실제 요구의 헤더 목록이 포함됩니다.그런 다음 서버는 브라우저가 실제 요청을 전송하기 전에 이러한 헤더가 이 컨텍스트에서 지원되는지 여부를 보고합니다.

커스텀 헤더를 송신하기 때문에, CORS 요구는 단순한 요구가 아니기 때문에, 브라우저는 우선 프리플라이트 OPTIONS 요구를 송신해, 서버가 요구를 허가하고 있는 것을 확인합니다.

서버에서 CORS를 켜면 코드가 작동합니다.대신 JavaScript 가져오기(여기)를 사용할 수도 있습니다.

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탁한한다

「」를 추가해 .'Content-Type':'application/json':

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

고객 측에서는 이 문제를 해결할 수 없습니다.

Node.js 및 Express.js 측에서 Cors 모듈을 사용하여 처리할 수 있습니다.

var express    = require('express');
var app        = express();
var bodyParser = require('body-parser');
var cors       = require('cors');

var port = 3000;
var ip = '127.0.0.1';

app.use('*/myapi',
        cors(), // With this row OPTIONS has handled
        bodyParser.text({type: 'text/*'}),
        function(req, res, next) {
            console.log('\n.----------------' + req.method + '------------------------');
            console.log('| prot:' + req.protocol);
            console.log('| host:' + req.get('host'));
            console.log('| URL:' + req.originalUrl);
            console.log('| body:', req.body);
            //console.log('| req:', req);
            console.log('.----------------' + req.method + '------------------------');
            next();
        });

app.listen(port, ip, function() {
    console.log('Listening to port:  ' + port);
});

console.log(('dir:' + __dirname));
console.log('The server is up and running at http://' + ip + ':' + port + '/');

Cors()를 사용하지 않을 경우 이러한 옵션은 POST 전에 표시되어야 합니다.

.----------------OPTIONS------------------------
| prot:http
| host:localhost:3000
| url:/myapi
| body: {}
.----------------OPTIONS------------------------

.----------------POST------------------------
| prot:http
| host:localhost:3000
| url:/myapi
| body: <SOAP-ENV:Envelope .. P-ENV:Envelope>
.----------------POST------------------------

Ajax 콜:

$.ajax({
    type: 'POST',
    contentType: "text/xml; charset=utf-8",

    //These does not work
    //beforeSend: function(request) {
    //  request.setRequestHeader('Content-Type', 'text/xml; charset=utf-8');
    //  request.setRequestHeader('Accept', 'application/vnd.realtime247.sct-giro-v1+cms');
    //  request.setRequestHeader('Access-Control-Allow-Origin', '*');
    //  request.setRequestHeader('Access-Control-Allow-Methods', 'POST, GET');
    //  request.setRequestHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type');
    //},
    //headers: {
    //  'Content-Type': 'text/xml; charset=utf-8',
    //  'Accept': 'application/vnd.realtime247.sct-giro-v1+cms',
    //  'Access-Control-Allow-Origin': '*',
    //  'Access-Control-Allow-Methods': 'POST, GET',
    //  'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type'
    //},
    url: 'http://localhost:3000/myapi',
    data: '<SOAP-ENV:Envelope .. P-ENV:Envelope>',
    success: function(data) {
      console.log(data.documentElement.innerHTML);
    },
    error: function(jqXHR, textStatus, err) {
      console.log(jqXHR, '\n', textStatus, '\n', err)
    }
  });

랙코어 보석을 사용해 보세요.그리고 Ajax 콜에 헤더필드를 추가합니다.

언급URL : https://stackoverflow.com/questions/10093053/access-control-request-headers-is-added-to-header-in-ajax-request-with-jquery