Header Permintaan Kontrol Akses, ditambahkan ke header dalam permintaan AJAX dengan jQuery

Saya ingin menambahkan header khusus ke permintaan POST AJAX dari jQuery.

Saya sudah mencoba ini:

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

Ketika saya mengirim permintaan ini dan saya menonton dengan FireBug, saya melihat tajuk ini:

OPSI xxxx / yyyy HTTP / 1.1
Host: 127.0.0.1:6666
Agen Pengguna: Mozilla / 5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko / 20100101 Firefox / 11.0
Menerima: teks / html, aplikasi / xhtml + xml, application / xml; q = 0,9, / ; q = 0,8
Bahasa yang diterima: fr, fr-fr; q = 0,8, id-us; q = 0,5, en; q = 0,3
Pengodean Terima: gzip, deflate
Koneksi: keep -alasan asli
: null
Akses-Kontrol-Permintaan-Metode: POST
Akses-Kontrol-Permintaan-Header: header-pertama-saya, header-kedua-saya
Pragma: no-cache
Cache-Control: no-cache

Mengapa header khusus saya buka Access-Control-Request-Headers:

Akses-Kontrol-Permintaan-Header: header-pertama-saya, header-kedua-saya

Saya mengharapkan nilai header seperti ini:

My-First-Header: nilai pertama
My-Second-Header: nilai kedua

Apa itu mungkin?

Apa yang Anda lihat di Firefox bukanlah permintaan yang sebenarnya; perhatikan bahwa metode HTTP adalah OPSI, bukan POST. Sebenarnya itu adalah permintaan 'pra-penerbangan' yang dibuat browser untuk menentukan apakah permintaan AJAX lintas-domain harus diizinkan:

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

Header Akses-Kontrol-Permintaan-Header dalam permintaan pra-penerbangan menyertakan daftar header dalam permintaan aktual. Server kemudian diharapkan melaporkan kembali apakah tajuk ini didukung dalam konteks ini atau tidak, sebelum browser mengirimkan permintaan yang sebenarnya.

Berikut adalah contoh cara mengatur header permintaan dalam panggilan 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));
  }
});

Kode di bawah ini berfungsi untuk saya. Saya selalu menggunakan hanya satu tanda kutip, dan itu berfungsi dengan baik. Saya sarankan Anda hanya menggunakan tanda kutip tunggal atau hanya tanda kutip ganda, tetapi tidak tercampur aduk.

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

Karena Anda mengirim tajuk ubahsuaian sehingga permintaan CORS Anda bukan permintaan sederhana , jadi browser terlebih dahulu mengirim permintaan PILIHAN prelight untuk memeriksa apakah server mengizinkan permintaan Anda.

Jika Anda mengaktifkan CORS di server maka kode Anda akan berfungsi. Anda juga dapat menggunakan pengambilan JavaScript sebagai gantinya (di sini )

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>

Berikut adalah contoh konfigurasi yang mengaktifkan CORS pada nginx (file nginx.conf):

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;
    }
}

Berikut adalah contoh konfigurasi yang menyalakan CORS di Apache (file .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"

Dan itulah sebabnya Anda tidak dapat membuat bot dengan JavaScript, karena opsi Anda terbatas pada apa yang memungkinkan browser Anda lakukan. Anda tidak bisa hanya memesan peramban yang mengikuti kebijakan CORS , yang diikuti sebagian besar peramban, untuk mengirim permintaan acak ke sumber lain dan memungkinkan Anda mendapatkan respons yang sederhana!

Selain itu, jika Anda mencoba mengedit beberapa header permintaan secara manual, seperti origin-headerdari alat pengembang yang datang dengan browser, browser akan menolak suntingan Anda dan dapat mengirim OPTIONSpermintaan preflight .

Cobalah menggunakan permata rak-kors . Dan tambahkan bidang tajuk di panggilan Ajax Anda.