Erişim Denetimi İstek Üstbilgileri, jQuery ile AJAX isteğinde üstbilgiye eklenir

JQuery AJAX POST isteğine özel bir başlık eklemek istiyorum.

Bunu denedim:

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

Bu isteği gönderdiğimde ve FireBug ile izlediğimde şu başlığı görüyorum:

SEÇENEKLER xxxx / yyyy HTTP / 1.1
Ana Bilgisayar: 127.0.0.1:6666
Kullanıcı Aracısı: Mozilla / 5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko / 20100101 Firefox / 11.0
Kabul: metin / html, uygulama / xhtml + xml, application / xml; q = 0.9, / ; q = 0.8
Kabul Dili: fr, fr-fr; q = 0.8, en-us; q = 0.5, en; q = 0.3
Kabul Et-Kodlama: gzip, deflate
Bağlantı: tutmak -alive
Menşei: null
Erişim-Denetim-İstek-Yöntem: POST
Erişim-Denetim-İstek-Üstbilgiler: benim ilk başlığım, ikinci başlığım
Pragma: no-cache
Cache-Control: no-cache

Benim özel başlıklar Neden gidiyorsun Access-Control-Request-Headers:

Erişim-Denetim-İstek-Başlıkları: ilk başlığım, ikinci başlığım

Ben böyle bir başlık değerleri bekliyordum:

Birinci Başlığım: ilk değer
İkinci Başlığım: ikinci değer

Mümkün mü?

Firefox'ta gördükleriniz gerçek istek değildi; HTTP yönteminin POST değil OPTIONS olduğunu unutmayın. Aslında, tarayıcının bir etki alanları arası AJAX isteğine izin verilip verilmeyeceğini belirlemek için yaptığı 'uçuş öncesi' isteğiydi:

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

Uçuş öncesi isteğindeki Access-Control-Request-Headers üstbilgisi, gerçek istekteki üstbilgilerin listesini içerir. Daha sonra sunucunun, tarayıcı gerçek isteği göndermeden önce bu başlıkların bu bağlamda desteklenip desteklenmediğini raporlaması beklenir.

Aşağıda, bir jQuery Ajax çağrısında istek üstbilgisinin nasıl ayarlanacağı örneği verilmektedir:

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

Aşağıdaki kod benim için çalışıyor. Her zaman sadece tek tırnak kullanıyorum ve iyi çalışıyor. Ben sadece tek tırnak veya sadece çift tırnak kullanmanızı öneririz , ancak karışık değil.

$.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 isteğiniz basit bir istek olmayacak şekilde özel üstbilgiler gönderdiğiniz için, tarayıcı ilk olarak sunucunun isteğinize izin verip vermediğini kontrol etmek için bir ön kontrol OPTIONS isteği gönderir.

Sunucuda CORS'yi açarsanız kodunuz çalışır. Bunun yerine JavaScript getirmeyi de kullanabilirsiniz ( burada )

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>

İşte nginx (nginx.conf dosyası) üzerinde CORS'yi açan bir örnek yapılandırma :

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'de (.htaccess dosyası) CORS'yi açan örnek bir yapılandırma

# ------------------------------------------------------------------------------
# | 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"

Bu nedenle JavaScript ile bir bot oluşturamazsınız, çünkü seçenekleriniz tarayıcının yapmanıza izin verdiği şeyle sınırlıdır. Çoğu kökenin izlediği CORS politikasını izleyen bir tarayıcıyı, diğer kökenlere rastgele istekler göndermek ve basitçe yanıt almanızı sağlamak için sipariş edemezsiniz !

Ayrıca, origin-headertarayıcılarla birlikte gelen geliştiriciler araçlarında olduğu gibi bazı istek başlıklarını el ile düzenlemeye çalıştıysanız , tarayıcı düzenlemenizi reddeder ve ön kontrol OPTIONSisteği gönderebilir .

Rack-cors gem'i kullanmaya çalışın . Ve Ajax çağrınıza başlık alanını ekleyin.