javascript menetapkan tajuk permintaan http

JavaScript ialah bahasa yang digunakan secara meluas dalam pembangunan bahagian hadapan Ia boleh mencapai komunikasi rangkaian yang lebih cekap dengan menetapkan pengepala permintaan HTTP. Pengepala permintaan HTTP ialah sebahagian daripada protokol HTTP Ia terletak di kepala permintaan HTTP dan digunakan untuk menghantar maklumat permintaan, seperti Ejen Pengguna, Terima, dsb. Dalam JavaScript, kami boleh mengoptimumkan permintaan rangkaian dengan menetapkan pengepala permintaan HTTP, seperti meningkatkan keselamatan, kawalan cache, merentas domain, dsb.

Artikel ini akan memperkenalkan cara menetapkan pengepala permintaan HTTP dalam JavaScript.

1. Tetapkan pengepala permintaan Ajax

Dalam JavaScript, kami biasanya menggunakan Ajax untuk membuat permintaan rangkaian. Berikut ialah contoh permintaan Ajax yang mudah:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('GET', '/api/data', true); // 发起GET请求，true表示是异步请求
xhr.send();

Dalam kod di atas, kami memulakan permintaan GET melalui objek XMLHttpRequest dan memproses data respons dalam kaedah onreadystatechangenya. Walaupun permintaan ini boleh dimulakan dengan jayanya dan data respons diperoleh, pengepala permintaan HTTP tidak ditetapkan. Dalam Ajax, kami boleh menetapkan pengepala permintaan HTTP dengan menetapkan kaedah setRequestHeader bagi objek XMLHttpRequest, contohnya:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('GET', '/api/data', true); // 发起GET请求，true表示是异步请求
xhr.setRequestHeader('Authorization', 'Bearer my_token'); // 设置Authorization请求头
xhr.send();

Dalam kod di atas, kami menambah baris kod untuk menetapkan pengepala permintaan Kebenaran, yang nilainya ialah Bearer my_token , iaitu, menggunakan kaedah pengesahan Token Bearer untuk mengakses API pelayan. Dengan cara ini, kami boleh menetapkan pengepala permintaan HTTP dalam permintaan Ajax untuk memudahkan akses kepada antara muka API, memindahkan maklumat pengesahan, dsb.

2. Tetapkan pengepala permintaan XHR

Dalam JavaScript, objek XMLHttpRequest ialah alat yang paling biasa digunakan untuk berinteraksi dengan pelayan Ia boleh menjadi lebih cekap dengan menetapkan maklumat pengepala HTTP komunikasi rangkaian. Berikut ialah contoh tetapan pengepala permintaan XHR:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('POST', '/api/data', true); // 发起POST请求，true表示是异步请求
xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头Content-Type为JSON
xhr.send(JSON.stringify({name: 'Tom'})); // 发送JSON数据

Dalam kod di atas, kami memulakan permintaan POST melalui objek XMLHttpRequest dan menetapkan pengepala permintaan Jenis Kandungan kepada aplikasi/json untuk memudahkan permintaan kepada pelayan API menghantar data dalam format JSON. Dengan cara ini, kami boleh menetapkan pengepala permintaan HTTP dalam permintaan XHR untuk mencapai komunikasi rangkaian yang lebih cekap.

3. Tetapkan pengepala permintaan Ambil

Dalam ES6, Fetch ialah API permintaan rangkaian yang lebih berkuasa disokong secara asli Ia mengembalikan objek Promise dan menyokong panggilan berantai , dan lebih ringkas . Berikut ialah contoh permintaan Ambil yang mudah:

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

Dalam kod di atas, kami memulakan permintaan GET melalui fungsi ambil dan memproses data respons yang dikembalikan. Walaupun permintaan ini berjaya dimulakan dan data respons telah diperoleh, pengepala permintaan HTTP tidak ditetapkan. Dalam Ambil, kami boleh menetapkan pengepala permintaan HTTP dengan menetapkan objek Pengepala yang diminta, sebagai contoh:

fetch('/api/data', {
  headers: {
    'Authorization': 'Bearer my_token',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

Dalam kod di atas, kami menambah baris kod untuk menetapkan objek pengepala permintaan Pengepala, yang termasuk Keizinan dan Pengepala permintaan Jenis Kandungan dua untuk memudahkan mengakses antara muka API, menghantar maklumat pengesahan, menentukan jenis data, dsb. Dengan cara ini, kami boleh menetapkan pengepala permintaan HTTP dalam permintaan Ambil untuk mencapai permintaan rangkaian yang lebih cekap.

Ringkasan:

Untuk menetapkan pengepala permintaan HTTP dalam JavaScript, anda perlu menggunakan kaedah tetapan yang berbeza mengikut alatan permintaan rangkaian yang berbeza. Dalam Ajax, kami menetapkan pengepala permintaan HTTP melalui kaedah setRequestHeader bagi objek XMLHttpRequest dalam XHR, kami juga menetapkan pengepala permintaan HTTP melalui kaedah setRequestHeadernya dalam Fetch, kami perlu menetapkan objek Pengepala untuk menetapkan pengepala permintaan HTTP. Tidak kira kaedah tetapan yang digunakan, pengepala permintaan HTTP yang sesuai perlu dipilih mengikut situasi tertentu untuk mencapai komunikasi rangkaian yang lebih cekap.

Atas ialah kandungan terperinci javascript menetapkan tajuk permintaan http. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!