Mengakses tajuk HTTP suatu halaman web dalam javascript

Bagaimana cara mengakses header respons HTTP HTTP melalui javascript?

Terkait dengan pertanyaan ini , yang telah dimodifikasi untuk menanyakan tentang akses ke dua header HTTP tertentu.

Terkait:
Bagaimana cara mengakses bidang tajuk permintaan HTTP melalui javascript?

353
21 окт. ditetapkan oleh keparo pada 21 Oktober 2008-10-21 01:54 '08 pada 1:54 2008-10-21 01:54
@ 16 jawaban

Sayangnya, tidak ada API yang memberi Anda header respons HTTP untuk permintaan halaman awal Anda. Itu adalah pertanyaan asli yang diposting di sini. Ini juga beru> , karena beberapa orang ingin menerima tajuk respons sebenarnya dari permintaan halaman asli tanpa mengirim yang lain.


Untuk permintaan AJAX:

Jika permintaan HTTP dibuat melalui AJAX, Anda bisa mendapatkan header respons menggunakan getAllResponseHeaders() . Ini adalah bagian dari API XMLHttpRequest. Untuk melihat bagaimana ini dapat diterapkan, lihat fetchSimilarHeaders() bawah ini. Harap dicatat bahwa ini adalah solusi yang tidak akan dapat diandalkan untuk beberapa aplikasi.

 myXMLHttpRequest.getAllResponseHeaders(); 

Ini tidak akan memberi Anda informasi tentang tajuk HTTP asli dari respons terhadap permintaan laman, tetapi dapat digunakan untuk membuat asumsi yang masuk akal tentang apa tajuk ini. Lebih lanjut tentang ini dijelaskan di bawah ini.


Mendapatkan nilai tajuk dari permintaan beranda:

Pertanyaan ini pertama kali ditanyakan beberapa tahun yang lalu, khususnya, bagaimana cara mendapatkan header respons HTTP asli untuk halaman saat ini (yaitu, halaman yang sama persis dengan tempat JavaScript dijalankan). Ini adalah pertanyaan yang sama sekali berbeda dari sekadar mendapatkan tajuk respons untuk permintaan HTTP apa pun. Untuk permintaan halaman awal header tidak selalu tersedia untuk javascript. Apakah nilai tajuk yang Anda butuhkan akan dapat diandalkan dan konsisten, jika Anda meminta halaman yang sama lagi melalui AJAX, akan tergantung pada aplikasi khusus Anda.

Di bawah ini adalah beberapa saran untuk menyelesaikan masalah ini.


1. Permintaan sumber daya yang sebagian besar statis

Jika jawabannya sebagian besar statis, dan tajuk tidak boleh banyak berubah di antara permintaan, Anda dapat membuat permintaan AJAX untuk halaman yang sama dengan yang Anda gunakan saat ini dan menganggap bahwa ini adalah nilai yang sama dengan yang merupakan bagian dari halaman. Tanggapan HTTP. Ini memungkinkan Anda untuk mengakses tajuk yang diperlukan menggunakan API XMLHttpRequest yang indah yang dijelaskan di atas.

 function fetchSimilarHeaders (callback) { var request = new XMLHttpRequest(); request.onreadystatechange = function () { if (request.readyState === XMLHttpRequest.DONE) { // // The following headers may often be similar // to those of the original page request... // if (callback  typeof callback === 'function') { callback(request.getAllResponseHeaders()); } } }; // // Re-request the same page (document.location) // We hope to get the same or similar response headers to those which // came with the current page, but we have no guarantee. // Since we are only after the headers, a HEAD request may be sufficient. // request.open('HEAD', document.location, true); request.send(null); } 

Pendekatan ini akan bermasalah jika Anda benar-benar harus bergantung pada nilai-nilai yang disepakati antara permintaan, karena Anda tidak dapat sepenuhnya menjamin bahwa mereka adalah sama. Itu akan tergantung pada aplikasi khusus Anda dan apakah Anda tahu bahwa nilai yang Anda butuhkan tidak akan berubah dari satu permintaan ke yang lain.


2. Gambar kesimpulan

Ada beberapa properti spesifikasi (model objek browser) yang ditentukan browser dengan melihat header. Beberapa properti ini secara >navigator.userAgent diatur ke bidang header HTTP User-Agent ). Mengendus properti yang tersedia, Anda dapat menemukan apa yang Anda butuhkan, atau beberapa petunjuk, untuk menunjukkan apa yang terkandung dalam respons HTTP.


3. sembunyikan mereka

Jika Anda mengontrol sisi server, Anda dapat mengakses header apa pun yang Anda suka saat membuat respons lengkap. Nilai dapat diteruskan ke klien dengan halaman, disembunyikan di beberapa markup, atau mungkin dalam struktur JSON bawaan. Jika Anda ingin setiap tajuk permintaan HTTP tersedia untuk javascript Anda, Anda dapat mengu>

267
21 окт. jawabannya diberikan keparo 21 oktober. 2008-10-21 01:55 '08 pada 1:55 2008-10-21 01:55

Tidak dapat membaca tajuk saat ini. Anda dapat membuat permintaan lain ke URL yang sama dan membaca tajuknya, tetapi tidak ada jaminan bahwa tajuknya persis sama dengan yang saat ini.


Gunakan kode JavaScript berikut untuk mendapatkan semua tajuk HTTP dengan menjalankan permintaan get :

 var req = new XMLHttpRequest(); req.open('GET', document.location, false); req.send(null); var headers = req.getAllResponseHeaders().toLowerCase(); alert(headers); 
333
03 февр. Jawabannya diberikan Raja 03 Feb. 2011-02-03 04:26 '11 pada pukul 4:26 pagi 2011-02-03 04:26

Menggunakan XmlHttpRequest , Anda bisa menarik keluar halaman saat ini dan kemudian memeriksa header respons http.

Kasus terbaik adalah dengan mengeksekusi permintaan HEAD , dan kemudian memeriksa header.

Untuk beberapa contohnya, lihat http://www.jibbering.com/2002/4/httprequest.html

Hanya 2 sen saya.

27
04 нояб. balasan yang diberikan kepada Allain Lalonde 4 Nov 2008-11-04 00:53 '08 pada 0:53 2008-11-04 00:53

Solusi dengan pekerja layanan

Pekerja layanan dapat mengakses informasi jaringan yang mencakup berita utama. Bagian yang bagus adalah ia bekerja dengan semua jenis permintaan, dan tidak hanya dengan XMLHttpRequest.

Cara kerjanya:

  • Tambahkan karyawan layanan ke situs Anda.
  • Lihat setiap permintaan yang dikirim.
  • Buat permintaan fetch menjadi pekerja layanan menggunakan fungsi respondWith .
  • Ketika jawabannya, baca berita utama.
  • Kirim header pekerja layanan ke halaman menggunakan fungsi postMessage .

Contoh kerja:

Agak sulit bagi pekerja layanan untuk mengerti, jadi saya telah membuat perpustakaan kecil yang melakukan semuanya. Ini tersedia di github: https://github.com/gmetais/sw-get-headers .

Keterbatasan:

  • situs web harus di https
  • browser perlu mendukung API Pekerja Layanan baru
  • ada kebijakan dari domain / domain interdomain yang sama, serta XMLHttpRequest
14
11 июня '16 в 13:19 2016-06-11 13:19 Jawaban diberikan oleh Gaël Métais pada 11 Juni, '16 pada 13:19 2016-06-11 13:19

Cara lain untuk mengirim informasi header ke javascript akan melalui cookie. Server dapat mengekstraksi semua data yang diperlukan dari header permintaan dan mengirimkannya kembali ke header respons Set-Cookie , dan cookie dapat dibaca dalam JavaScript. Namun, seperti kata keparo, yang terbaik untuk melakukan ini hanya satu atau dua header, dan tidak untuk semua orang.

9
21 окт. jawaban diberikan savetheclocktower 21 Okt 2008-10-21 02:34 '08 pada pukul 02:34 2008-10-21 02:34

Bagi mereka yang mencari cara untuk mem-parsing semua HTTP header menjadi sebuah objek yang dapat diakses sebagai headers["content-type"] kamus headers["content-type"] , saya menciptakan fungsi parseHttpHeaders :

 function parseHttpHeaders(httpHeaders) { return httpHeaders.split("\n") .map(x=>x.split(/: */,2)) .filter(x=>x[0]) .reduce((ac, x)=>{ac[x[0]] = x[1];return ac;}, {}); } var req = new XMLHttpRequest(); req.open('GET', document.location, false); req.send(null); var headers = parseHttpHeaders(req.getAllResponseHeaders()); // Now we can do: headers["content-type"] 
7
09 дек. Diego menjawab 09 Des 2017-12-09 04:11 '17 pada 4:11 2017-12-09 04:11

Jika kita berbicara tentang header permintaan, Anda dapat membuat header Anda sendiri saat melakukan XmlHttpRequests.

 var request = new XMLHttpRequest(); request.setRequestHeader("X-Requested-With", "XMLHttpRequest"); request.open("GET", path, true); request.send(null); 
5
21 окт. Leo menjawab 21 Okt. 2008-10-21 08:44 '08 pada 8:44 2008-10-21 08:44

Anda tidak dapat mengakses header http, tetapi beberapa informasi yang disediakan tersedia di DOM. Misalnya, jika Anda ingin melihat rujukan http, gunakan document.referrer. Mungkin ada yang serupa lainnya untuk header http lainnya. Coba cari topik tertentu, seperti "http referer javascript".

Saya tahu bahwa ini harus jelas, tetapi saya terus mencari hal-hal seperti "http header javascript", ketika semua yang saya inginkan adalah wasit dan tidak mendapatkan hasil yang bermanfaat. Saya tidak tahu bagaimana saya tidak mengerti bahwa saya bisa membuat permintaan yang lebih spesifik.

4
30 янв. Balas diberikan oleh David Winiecki 30 Jan 2013-01-30 03:06 '13 pada 3:06 2013-01-30 03:06

Seperti banyak orang, saya menggali jaringan tanpa jawaban nyata: (

Saya masih belajar jalan memutar yang bisa membantu orang lain. Dalam kasus saya, saya memiliki kontrol penuh terhadap server web saya. Ini sebenarnya bagian dari aplikasi saya (lihat Tautan Akhir). Mudah bagi saya untuk menambahkan skrip ke respons HTTP saya. Saya memodifikasi server httpd saya untuk memperkenalkan skrip kecil ke dalam setiap halaman HTML. Saya cukup mengeklik baris "skrip js" tambahan segera setelah konstruksi tajuk, yang menetapkan variabel yang ada dari dokumen saya di browser saya [saya memilih lokasi], tetapi opsi lain dimungkinkan. Meskipun server saya ditulis dalam nodejs, saya tidak ragu bahwa metode yang sama dapat digunakan dengan PHP atau yang lainnya.

  case ".html": response.setHeader("Content-Type", "text/html"); response.write ("<script>location['GPSD_HTTP_AJAX']=true</script>") // process the real contend of my page 

Sekarang setiap halaman html diunduh dari server saya memiliki skrip ini dieksekusi oleh browser di resepsi. Maka saya dapat dengan mudah memeriksa javascript apakah variabelnya ada atau tidak. Dalam kasus saya, saya perlu tahu apakah saya harus menggunakan profil JSON atau JSON-P untuk menghindari masalah CORS, tetapi metode yang sama dapat digunakan untuk tujuan lain [yaitu: memilih antara server pengembangan / produksi, terima dari REST / server Kunci API, dll.).

Di browser, Anda hanya perlu memeriksa variabel >

  // Select direct Ajax/Json profile if using GpsdTracking/HttpAjax server otherwise use JsonP var corsbypass = true; if (location['GPSD_HTTP_AJAX']) corsbypass = false; if (corsbypass) { // Json  html served from two different web servers var gpsdApi = "http://localhost:4080/geojson.rest?jsoncallback=?"; } else { // Json  html served from same web server [no ?jsoncallback=] var gpsdApi = "geojson.rest?"; } var gpsdRqt = {key :123456789 // user authentication key ,cmd :'list' // rest command ,group :'all' // group to retreive ,round : true // ask server to round numbers }; $.getJSON(gpsdApi,gpsdRqt, DevListCB); 

Bagi mereka yang ingin memeriksa kode saya: https://www.npmjs.org/package/gpsdtracking

3
15 окт. jawabannya diberikan Fulup 15 Oktober. 2014-10-15 14:36 '14 pada 14:36 2014-10-15 14:36

Saya baru saja mengujinya dan berfungsi untuk saya menggunakan Chrome versi 28.0.1500.95.

Saya perlu mengunduh file dan membaca nama file. Nama file di header, jadi saya melakukan hal berikut:

 var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.responseType = "blob"; xhr.onreadystatechange = function () { if (xhr.readyState == 4) { success(xhr.response); // the function to proccess the response console.log("++++++ reading headers ++++++++"); var headers = xhr.getAllResponseHeaders(); console.log(headers); console.log("++++++ reading headers end ++++++++"); } }; 

Kesimpulan:

 Date: Fri, 16 Aug 2013 16:21:33 GMT Content-Disposition: attachment;filename=testFileName.doc Content-Length: 20 Server: Apache-Coyote/1.1 Content-Type: application/octet-stream 
3
16 авг. jawabannya diberikan oleh rushmore 16 agustus. 2013-08-16 19:29 '13 pada 19:29 2013-08-16 19:29

Menggunakan mootools, Anda dapat menggunakan this.xhr.getAllResponseHeaders ()

3
10 нояб. balasan diberikan oleh aman 10 Nov 2008-11-10 15:37 '08 pada 15:37 2008-11-10 15:37

Ini pertanyaan lama. Tidak yakin kapan dukungan menjadi lebih luas, tetapi sekarang getAllResponseHeaders() dan getResponseHeader() terlihat sangat standar: http://www.w3schools.com/xml/dom_http.asp

2
31 янв. jawabannya diberikan dlo 31 januari . 2011-01-31 05:17 '11 pada 5:17 2011-01-31 05:17

Ini skrip saya untuk mendapatkan semua header respons:

 var url = "< URL >"; var req = new XMLHttpRequest(); req.open('HEAD', url, false); req.send(null); var headers = req.getAllResponseHeaders(); //Show alert with response headers. alert(headers); 

Dengan tajuk respons yang dihasilkan.

2019

13 дек. Jawaban yang diberikan oleh Jorgesys 13 Des 2017-12-13 01:34 '17 pada 1:34 pagi 2017-12-13 01:34

Untuk mendapatkan tajuk berita sebagai objek yang lebih nyaman ( respons Raji yang ditingkatkan):

 var req = new XMLHttpRequest(); req.open('GET', document.location, false); req.send(null); var headers = req.getAllResponseHeaders().toLowerCase(); headers = headers.split(/\n|\r|\r\n/g).reduce(function(a, b) { if (b.length) { var [ key, value ] = b.split(': '); a[key] = value; } return a; }, {}); console.log(headers); 
0
14 авг. jawaban yang diberikan shaedrich 14 Agustus. 2018-08-14 16:16 '18 pukul 16:16 2018-08-14 16:16

Saya pikir pertanyaannya salah jika Anda ingin mengambil header permintaan dari jQuery / javascript, jawabannya tidak. Solusi lain adalah membuat halaman aspx atau halaman jsp, maka kita dapat dengan mudah mengakses header permintaan. Ambil seluruh permintaan pada halaman aspx dan letakkan di sesi / cookie, maka Anda dapat mengakses cookie pada halaman javascript.

-1
05 дек. jawabannya diberikan kepada santhos jery 05 des . 2018-12-05 20:02 '18 pada 20:02 2018-12-05 20:02

Seperti disebutkan, jika Anda mengontrol sisi server, maka mungkin untuk mengirim header permintaan asli kembali ke klien dalam respons awal.

Di Express, misalnya, berikut ini berfungsi:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) Kemudian header tersedia di template, sehingga dapat disembunyikan secara visual , tetapi termasuk dalam markup dan membaca javascript klien.

-1
25 марта '18 в 4:58 2018-03-25 04:58 jawabannya diberikan otw 25 Maret '18 di 4:58 2018-03-25 04:58

Pertanyaan lain tentang tag atau Ajukan Pertanyaan