الوصول إلى رؤوس HTTP لصفحة الويب في JavaScript

Question

كيف يمكنني الوصول إلى رؤوس استجابة HTTP الخاصة بالصفحة عبر JavaScript؟

متعلق ب هذا السؤال, ، والتي تم تعديلها للسؤال عن الوصول إلى اثنين من رؤوس HTTP محددة.

متعلق ب:
كيف يمكنني الوصول إلى حقول رأس طلب HTTP عبر JavaScript؟

Answer 1

لسوء الحظ ، لا يوجد واجهة برمجة تطبيقات لإعطائك رؤوس استجابة HTTP لطلب الصفحة الأولية الخاصة بك. كان هذا هو السؤال الأصلي المنشور هنا. قد كان طلب مرارا وتكرارا, أيضًا ، لأن بعض الأشخاص يرغبون في الحصول على رؤوس الاستجابة الفعلية لطلب الصفحة الأصلي دون إصدار واحد آخر.

لطلبات AJAX:

إذا تم تقديم طلب HTTP على Ajax ، فمن الممكن الحصول على رؤوس الاستجابة مع getAllResponseHeaders() طريقة. إنه جزء من واجهة برمجة تطبيقات XMLHTTPrequest. لمعرفة كيف يمكن تطبيق ذلك ، تحقق من fetchSimilarHeaders() وظيفة أدناه. لاحظ أن هذا هو عمل للمشكلة التي لن تكون موثوقة لبعض التطبيقات.

myXMLHttpRequest.getAllResponseHeaders();

• تم تحديد واجهة برمجة التطبيقات في توصية المرشح التالية لـ XMLHTTPrequest: xmlhttprequest - توصية مرشح W3C 3 أغسطس 2010

• على وجه التحديد ، و getAllResponseHeaders() تم تحديد الطريقة في القسم التالي: W3.org: XMLHttpRequest: ال getallresponseheaders() طريقة

• وثائق MDN جيدة أيضًا: المطور. mozilla.org: XMLHttpRequest.

لن يمنحك هذا معلومات حول رؤوس استجابة HTTP الخاصة بطلب الصفحة الأصلية ، ولكن يمكن استخدامها لتخمينات متعلمة حول ماهية تلك الرؤوس. تم وصف المزيد عن ذلك بعد ذلك.

الحصول على قيم الرأس من طلب الصفحة الأولية:

تم طرح هذا السؤال لأول مرة منذ عدة سنوات ، يسأل على وجه التحديد عن كيفية الحصول على رؤوس استجابة HTTP الأصلية لـ الصفحه الحاليه (أي نفس الصفحة التي كانت JavaScript قيد التشغيل). هذا سؤال مختلف تمامًا عن مجرد الحصول على رؤوس الاستجابة لأي طلب HTTP. بالنسبة لطلب الصفحة الأولية ، فإن الرؤوس ليست متاحة بسهولة لجافا سكريبت. ما إذا كانت قيم الرأس التي تحتاجها ستكون ثابتة ومتسقة بما فيه الكفاية إذا طلبت نفس الصفحة مرة أخرى عبر AJAX تعتمد على تطبيقك الخاص.

فيما يلي بعض الاقتراحات للتغلب على هذه المشكلة.

1. طلبات بشأن الموارد ثابتة إلى حد كبير

إذا كانت الاستجابة ثابتة إلى حد كبير ولم يكن من المتوقع أن تتغير الرؤوس بين الطلبات ، فيمكنك تقديم طلب Ajax لنفس الصفحة التي تقوم بها حاليًا وتفترض أنها نفس القيم التي كانت جزءًا من الصفحة استجابة HTTP. قد يسمح لك ذلك بالوصول إلى الرؤوس التي تحتاجها باستخدام واجهة برمجة تطبيقات XMLHTTPrequest الجميلة الموضحة أعلاه.

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

سيكون هذا النهج مشكلة إذا كان عليك حقًا الاعتماد على القيم المتسقة بين الطلبات ، حيث لا يمكنك ضمان تمامًا أنها متشابهة. سيعتمد الأمر على تطبيقك المحدد وما إذا كنت تعلم أن القيمة التي تحتاجها هي شيء لن يتغير من طلب إلى آخر.

2. جعل الاستدلالات

هناك بعض خصائص بوم (نموذج كائن المتصفح) الذي يحدده المتصفح من خلال النظر إلى الرؤوس. تعكس بعض هذه الخصائص رؤوس HTTP مباشرة (على سبيل المثال navigator.userAgent تم تعيينه على قيمة HTTP User-Agent حقل الرأس). من خلال استنشاق الخصائص المتاحة ، قد تكون قادرًا على العثور على ما تحتاجه ، أو بعض القرائن للإشارة إلى استجابة HTTP الواردة.

3. خبأهم

إذا قمت بالتحكم في جانب الخادم ، فيمكنك الوصول إلى أي رأس تريده أثناء قيامك ببناء الاستجابة الكاملة. يمكن تمرير القيم إلى العميل مع الصفحة ، أو مخبأ في بعض العلامات أو ربما في بنية JSON المضمون. إذا كنت ترغب في الحصول على كل رأس طلب HTTP متاح لـ JavaScript الخاص بك ، فيمكنك التكرار من خلالها على الخادم وإرسالها مرة أخرى كقيم خفية في العلامات. ربما ليس من المثالي إرسال قيم الرأس بهذه الطريقة ، ولكن يمكنك بالتأكيد القيام بذلك للقيمة المحددة التي تحتاجها. يمكن القول إن هذا الحل غير فعال أيضًا ، لكنه سيؤدي المهمة إذا كنت بحاجة إليها.

Answer 2

لا يمكن قراءة الرؤوس الحالية. يمكنك تقديم طلب آخر إلى عنوان URL نفسه وقراءة رؤوسه ، ولكن ليس هناك ما يضمن أن الرؤوس مساوية تمامًا للتيار.

---

استخدم رمز JavaScript التالي للحصول على جميع رؤوس HTTP من خلال تنفيذ أ get طلب:

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
alert(headers);

Answer 3

استخدام XmlHttpRequest يمكنك سحب الصفحة الحالية ثم فحص رؤوس HTTP للاستجابة.

أفضل حالة هي مجرد القيام HEAD طلب ثم فحص الرؤوس.

لبعض الأمثلة على القيام بذلك ، ألق نظرة على http://www.jibbering.com/2002/4/httprequest.html

فقط بلدي 2 سنت.

Answer 4

حل مع عمال الخدمة

يمكن للعاملين في الخدمة الوصول إلى معلومات الشبكة ، والتي تشمل الرؤوس. الجزء الجيد هو أنه يعمل على أي نوع من الطلبات ، وليس فقط xmlhttprequest.

كيف تعمل:

1. أضف عامل خدمة على موقع الويب الخاص بك.
2. شاهد كل طلب يتم إرساله.
3. اجعل عامل الخدمة fetch الطلب مع respondWith وظيفة.
4. عندما يصل الاستجابة ، اقرأ الرؤوس.
5. أرسل الرؤوس من عامل الخدمة إلى الصفحة مع postMessage وظيفة.

مثال العمل:

عمال الخدمة معقدون بعض الشيء لفهمه ، لذلك قمت ببناء مكتبة صغيرة تقوم بكل هذا. وهي متوفرة على جيثب: https://github.com/gmetais/sw-get-headers.

محددات:

• يجب أن يكون الموقع يعمل https
• يحتاج المتصفح إلى دعم عمال الخدمة API
• سياسات نفس المجال/النطاقات قيد التنفيذ ، تمامًا مثل XMLHTTPrequest

Answer 5

هناك طريقة أخرى لإرسال معلومات الرأس إلى JavaScript هي من خلال ملفات تعريف الارتباط. يمكن للخادم استخراج أي بيانات يحتاجها من رؤوس الطلب وإرسالها مرة أخرى إلى داخل أ Set-Cookie رأس الاستجابة - يمكن قراءة ملفات تعريف الارتباط في JavaScript. كما يقول Keparo ، من الأفضل القيام بذلك لرأس واحد أو اثنين فقط ، بدلاً من كل منهم.

Answer 6

لأولئك الذين يبحثون عن وسيلة لتحليل جميع رؤوس HTTP في كائن يمكن الوصول إليه كقاموس headers["content-type"], ، لقد قمت بإنشاء وظيفة 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"]

Answer 7

إذا كنا نتحدث عنه طلب الرؤوس ، يمكنك إنشاء رؤوسك الخاصة عند القيام بـ XMLHTTPrequests.

var request = new XMLHttpRequest();
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.open("GET", path, true);
request.send(null);

Answer 8

لا يمكنك الوصول إلى رؤوس HTTP ، لكن بعض المعلومات المقدمة فيها متوفرة في DOM. على سبيل المثال ، إذا كنت ترغب في رؤية مرجع HTTP (SIC) ، فاستخدم document.referrer. قد يكون هناك آخرين مثل هذا لرؤوس HTTP الأخرى. جرب googling الشيء المحدد الذي تريده ، مثل "HTTP Pension JavaScript".

أعلم أن هذا يجب أن يكون واضحًا ، لكنني ظللت في البحث عن أشياء مثل "HTTP Headers JavaScript" عندما كان كل ما أردته حقًا هو المرجع ، ولم أحصل على أي نتائج مفيدة. لا أعرف كيف لم أدرك أنه يمكنني إجراء استعلام أكثر تحديدًا.

Answer 9

باستخدام Mootools ، يمكنك استخدام this.xhr.getAllResponseHeaders ()

Answer 10

مثل الكثير من الناس ، كنت أحفر الشبكة دون إجابة حقيقية :(

ومع ذلك ، اكتشفت أن هناك ممرًا يمكن أن يساعد الآخرين. في حالتي ، أتحكم بالكامل في خادم الويب الخاص بي. في الواقع ، إنه جزء من طلبي (انظر End Reference). من السهل بالنسبة لي إضافة نص إلى استجابة HTTP الخاصة بي. لقد قمت بتعديل خادم HTTPD الخاص بي لحقن برنامج نصي صغير داخل كل صفحات HTML. أنا فقط أدفع خطًا إضافيًا لـ "JS Script" مباشرةً بعد إنشاء Header الخاص بي ، والذي يضع متغيرًا موجودًا من مستندتي داخل متصفحي [اخترت الموقع] ، ولكن من الممكن أي خيار آخر. بينما يتم كتابة الخادم الخاص بي في NodeJS ، لا شك في أنه يمكن استخدام نفس التقنية من PHP أو غيرها.

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

الآن كل صفحات HTML محملة من الخادم الخاص بي ، قم بتنفيذ هذا البرنامج النصي من قبل المتصفح في الاستقبال. يمكنني بعد ذلك التحقق بسهولة من JavaScript إذا كان المتغير موجودًا أم لا. في بلدي usecase ، أحتاج إلى معرفة ما إذا كان ينبغي علي استخدام ملف تعريف JSON أو JSON-P لتجنب مشكلة CORS ، ولكن يمكن استخدام نفس التقنية لأغراض أخرى [أي: اختر بين خادم التطوير/الإنتاج ، احصل من الخادم A REST/API المفتاح ، إلخ ....

في المتصفح ، تحتاج فقط إلى التحقق من المتغير مباشرة من JavaScript كما في مثالي ، حيث أستخدمه لتحديد ملف تعريف JSON/JQuery الخاص بي

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

لمن يرغب في التحقق من الكود الخاص بي:https://www.npmjs.org/package/gpsdtracking

Answer 11

لقد اختبرت للتو ، وهذا يعمل بالنسبة لي باستخدام نسخة Chrome 28.0.1500.95.

كنت بحاجة إلى تنزيل ملف وقراءة اسم الملف. اسم الملف في الرأس لذلك فعلت ما يلي:

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 ++++++++");

    }
};

انتاج:

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

Answer 12

هذا سؤال قديم. لست متأكدًا عندما أصبح الدعم أكثر عرضًا ، ولكن getAllResponseHeaders() و getResponseHeader() يبدو الآن أنه قياسي إلى حد ما: http://www.w3schools.com/xml/dom_http.asp

Answer 13

هذا هو نصيتي للحصول على جميع رؤوس الاستجابة:

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

بعد ذلك نتيجة لرؤوس الاستجابة.

هذا اختبار للمقارنة باستخدام Hurl.it:

Answer 14

للحصول على الرؤوس ككائن عادل (تحسين إجابة رجا):

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

Answer 15

كما سبق ذكره ، إذا قمت بالتحكم في جانب الخادم ، فيجب أن يكون من الممكن إرسال رؤوس الطلب الأولي إلى العميل في الاستجابة الأولية.

في Express ، على سبيل المثال ، الأعمال التالية:

app.get('/somepage', (req, res) => { res.render('somepage.hbs', {headers: req.headers}); }) تتوفر الرؤوس بعد ذلك داخل القالب ، لذلك يمكن إخفاؤها بصريًا ولكن تم تضمينها في الترميز وقراءتها بواسطة JavaScript.

Answer 16

أعتقد أن السؤال ذهب بطريقة خاطئة ، إذا كنت ترغب في أخذ رأس الطلب من JQuery/JavaScript ، فإن الإجابة هي ببساطة. الحلول الأخرى هي إنشاء صفحة ASPX أو صفحة JSP ، ثم يمكننا الوصول بسهولة إلى رأس الطلب. خذ كل الطلب في صفحة ASPX ووضعه في جلسة/ملفات تعريف الارتباط ، ثم يمكنك الوصول إلى ملفات تعريف الارتباط في صفحة JavaScript ..