HTML 中用 JavaScript 获取请求头信息的方法

在 Web 开发中，有时我们需要获取请求头信息，以了解客户端与服务器之间传输的各种数据。在 HTML 环境下，JavaScript 提供了多种途径来实现这一目的。

在浏览器端，我们可以利用 XMLHttpRequest 对象来获取请求头。创建一个 XMLHttpRequest 实例后，通过 open 方法初始化请求，然后使用 send 方法发送请求。当请求完成且状态码为 200（表示成功）时，我们可以通过 getResponseHeader 方法来获取特定的请求头信息，或者使用 getAllResponseHeaders 方法获取所有的请求头信息并以字符串形式返回。例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-url', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var specificHeader = xhr.getResponseHeader('Content-Type');
        var allHeaders = xhr.getAllResponseHeaders();
        console.log(specificHeader);
        console.log(allHeaders);
    }
};
xhr.send();

另外，Fetch API 也是获取请求头的有效方式。Fetch API 提供了更简洁的语法来处理网络请求。在请求成功后，响应对象包含了 headers 属性，通过它可以访问到请求头信息。示例代码如下：

fetch('your-url')
  .then(response => {
        var specificHeader = response.headers.get('Content-Type');
        var allHeaders = response.headers;
        console.log(specificHeader);
        console.log(allHeaders);
    })
  .catch(error => {
        console.error('Error:', error);
    });

在服务器端，如果使用 Node.js 结合 Express 框架，获取请求头则更为直接。在 Express 的路由处理函数中，请求对象（req）包含了 headers 属性，它是一个包含所有请求头信息的对象。代码示例：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    var specificHeader = req.headers['content-type'];
    var allHeaders = req.headers;
    console.log(specificHeader);
    console.log(allHeaders);
    res.send('Hello World!');
});

const port = 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

通过这些方法，无论是在浏览器端还是服务器端，我们都能够方便地使用 JavaScript 获取请求头信息，从而满足各种业务需求，更好地优化和管理 Web 应用程序。