如何在JavaScript中发送完整的预构造HTTP请求？

浏览器环境下无法直接发送完整的原始HTTP请求文本（浏览器会自动管控部分请求头，比如Host、Content-Length这类头会被覆盖或自动计算），但你可以解析预构造的请求内容，拆分出头信息和请求体，用XMLHttpRequest来还原请求，无需转换成JSON对象。

实现代码 #

// 你的预构造请求文本
const rawRequest = `POST /cgi-bin/process.cgi HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.tutorialspoint.com
Content-Type: application/x-www-form-urlencoded
Content-Length: length
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive

licenseID=string&content=string&/paramsXML=string`;

// 拆分请求头与请求体（以两个换行符为分隔）
const [headerSection, requestBody] = rawRequest.split('\r\n\r\n');

// 解析请求行（第一行），提取请求方法和路径
const [requestLine, ...headerLines] = headerSection.split('\r\n');
const [method, path] = requestLine.split(' ');

// 解析请求头，过滤浏览器不允许手动设置的字段
const requestHeaders = {};
headerLines.forEach(line => {
  const [key, value] = line.split(': ', 2);
  if (key && value) {
    // 跳过浏览器自动管控的头字段
    if (!['Host', 'Content-Length'].includes(key)) {
      requestHeaders[key] = value;
    }
  }
});

// 创建XMLHttpRequest实例并发送请求
const xhr = new XMLHttpRequest();
const targetUrl = `https://www.tutorialspoint.com${path}`;
xhr.open(method, targetUrl);

// 设置请求头
Object.entries(requestHeaders).forEach(([key, value]) => {
  xhr.setRequestHeader(key, value);
});

// 处理响应
xhr.onload = () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('请求成功，响应内容:', xhr.responseText);
  } else {
    console.error('请求失败，状态码:', xhr.status);
  }
};

xhr.onerror = () => {
  console.error('请求发生网络错误');
};

// 发送请求体
xhr.send(requestBody);

关键说明 #

• Host头会由浏览器根据目标URL自动设置，手动设置会被覆盖，因此无需处理。
• Content-Length会由浏览器根据实际发送的请求体长度自动计算，手动设置的无效，所以直接跳过。
• 部分头字段（比如Connection）在现代浏览器中可能被默认策略覆盖，设置后不一定生效，但不影响核心请求逻辑。
• 如果是在Node.js环境，可以使用http/https模块直接发送原始请求，但上述代码针对浏览器场景优化。

内容的提问来源于stack exchange，提问作者Hedayat Mahdipour