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


405

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?



Judul pertanyaan harus menyatakan bahwa "Untuk Domain Lain"
Akuntan

Jawaban:


138

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.


438

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

10
thx, saya tahu mengirim Permintaan Ajax dengan Header kustom. Masalah saya adalah dengan domain yang berbeda .. Semua header kustom saya dimasukkan ke Access-Control-Request-Header. itu hanya keamanan di browser: lintas-domain.
fingerup

ya, dalam permintaan lintas domain browser dapat menyebabkan beberapa kesulitan. Anda selalu dapat menggunakan beberapa skrip proxy untuk mengirim permintaan lintas-domain Anda
milkovsky

Bagaimana cara menambahkan header dengan API KEY?
Si8

@ Si8 silakan periksa posting ini stackoverflow.com/questions/5517281/…
milkovsky

178

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

1
thx, saya tahu mengirim Permintaan Ajax dengan Header kustom. Masalah saya adalah dengan domain yang berbeda .. Semua header kustom saya dimasukkan ke Access-Control-Request-Header. itu hanya keamanan di browser: lintas-domain.
fingerup

Terima kasih, saya telah menetapkan tajuk: "Otorisasi: Basic XXXXXX" secara tidak sengaja, dan iOS 9 / Safari 9 melempar SyntaxError DOM 12 pada sebuah proyek.
Tandai

4
Apakah maksud Anda kutip ganda atau tunggal? Saya tidak berpikir siapa pun akan menggunakan tanda kurung ganda.
DBS

3
Kutipan ganda atau tunggal (bukan "tanda kurung") tidak ada hubungannya di sini.
Pere

X-CSRF-TOKEN untuk Laravel 5.6 ke atas
Abdul Rahman A Samad

12

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.

Masukkan deskripsi gambar di sini

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

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

Berikut adalah contoh konfigurasi yang menyalakan CORS di Apache (file .htaccess)


3

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 .


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.