I'm di sebuah ekstensi Google Chrome dengan izin "*://*/*"
dan aku'm mencoba untuk beralih dari XMLHttpRequest untuk Mengambil API.
Ekstensi toko user-input data login yang digunakan untuk dimasukkan langsung ke XHR's open() call for HTTP Auth, tetapi di bawah Fetch tidak lagi dapat digunakan langsung sebagai parameter. Untuk HTTP Basic Auth, menghindari pembatasan ini adalah sepele, karena anda dapat secara manual mengatur Otorisasi header:
fetch(url, {
headers: new Headers({ 'Authorization': 'Basic ' + btoa(login + ':' + pass) })
} });
HTTP Mencerna Auth namun membutuhkan lebih banyak interaktivitas; anda perlu untuk baca parameter yang dikirimkan server anda dengan 401 tanggapan untuk kerajinan berlaku otorisasi token. I've mencoba membaca WWW-Authenticate
respon header field dengan cuplikan ini:
fetch(url).then(function(resp) {
resp.headers.forEach(function(val, key) { console.log(key + ' -> ' + val); });
}
Tapi semua saya dapatkan adalah output ini:
content-type -> text/html; charset=iso-8859-1
Yang dengan sendirinya benar, tapi yang's masih hilang sekitar 6 lebih bidang yang sesuai untuk Chrome's Alat Pengembang. Jika saya menggunakan resp.header.mendapatkan("WWW-Authenticate")
(atau salah satu dari bidang-bidang lain dalam hal ini), saya hanya mendapatkan null
.
Ada kesempatan untuk masuk ke bidang-bidang lain yang menggunakan Fetch API?
Ada pembatasan untuk akses header respon ketika anda menggunakan Fetch API atas CORS. Karena pembatasan ini, anda dapat mengakses hanya mengikuti standar header:
Cache-Control
Content-Language
Content-Type
Berakhir
Last-Modified
Pragma
Ketika anda menulis kode untuk ekstensi Google Chrome, anda menggunakan CORS, maka anda dapat't mengakses semua header. Jika anda kontrol server, anda dapat kembali informasi kustom di respon tubuh
bukan header
Info lebih lanjut tentang pembatasan ini - https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types
Dari MDN
Anda juga bisa mendapatkan semua header dengan mengakses entri Iterator.
// Display the key/value pairs
for (var pair of res.headers.entries()) {
console.log(pair[0]+ ': '+ pair[1]);
}
Juga, perlu diingat ini bagian:
Untuk alasan keamanan, beberapa header hanya dapat dikendalikan oleh user agent. Header ini termasuk terlarang nama header dan dilarang respon header nama.
Untuk kompatibilitas dengan browser yang tidak mendukung ES2015 iterator (dan mungkin juga perlu mengambil/Janji polyfills), yang Header.forEach fungsi adalah pilihan terbaik:
r.headers.forEach(function(value, name) {
console(name + ": " + value);
});
Diuji di IE11 dengan Bluebird sebagai Janji polyfill dan whatwg-fetch as mengambil polyfill. Header.entri(), Header.kunci-kunci() dan Header.nilai-nilai() tidak bekerja.
Bagi kita untuk memperbaiki hal ini pembatasan masalah, menambahkan terkena header nama-nama yang cukup baik.
access-control-expose-header: headername1, headername2, ...
Setelah pengaturan ini header, script sisi klien mampu membaca header (headername1, headername2, ...) dari respon.