如何将浏览器JavaScript数据传递至Node.js后端并解决CORS问题？

嘿，别着急，你离解决问题真的只差一步了！我来帮你拆解这两个核心问题：跨域报错和Node.js接收POST数据的方法。

1. 修复服务端的CORS配置 & 监听地址问题 #

你的服务端监听的是172.0.0.1:8080，但客户端请求的是http://172.0.0.1（缺了端口8080），这是第一个坑！另外，CORS头需要补充允许POST方法和自定义请求头，不然浏览器会拦截跨域请求。修改后的服务端代码：

var http = require('http');
http.createServer(function (req, res) {
 console.log('Request received');
 // 完善CORS头，支持跨域POST请求
 res.writeHead(200, {
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin': 'http://localhost', // 明确允许你的前端域名，比*更安全
  'Access-Control-Allow-Methods': 'POST, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type'
 });

 // 处理OPTIONS预检请求（浏览器跨域POST前会先发这个验证）
 if (req.method === 'OPTIONS') {
  res.end();
  return;
 }

 // 接收并拼接POST数据（Node.js中POST数据是流式传输的）
 let receivedData = '';
 req.on('data', function (chunk) {
  receivedData += chunk.toString(); // 把二进制块转成字符串拼接
 });
 req.on('end', function () {
  console.log('客户端传递的原始数据：', receivedData);
  // 如果是JSON格式，可解析成对象
  try {
    const parsedData = JSON.parse(receivedData);
    console.log('解析后的JSON数据：', parsedData);
    // 这里就可以拿到你要的数字/文本啦
  } catch (err) {
    console.log('非JSON格式数据，直接使用即可');
  }
 });

 res.end(JSON.stringify({"msg": "OK"}));
}).listen(8080, '0.0.0.0'); // 改成0.0.0.0允许所有网卡访问，或者保持172.0.0.1但客户端要对应
console.log('Server running at http://172.0.0.1:8080/');

2. 修正客户端Ajax代码 #

不管用原生XHR还是jQuery，都要注意请求地址必须带端口8080，并且数据格式要和服务端匹配：

原生XHR版本： #

var targetNum = '你要传递的数字或文本'; // 比如'12345'
var request = new XMLHttpRequest();
request.open('POST', 'http://172.0.0.1:8080'); // 填正确的服务端地址
request.setRequestHeader('Content-Type', 'application/json;charset=utf-8'); // 声明JSON格式
request.send(JSON.stringify({data: targetNum})); // 把数据转成JSON字符串发送

// 可选：添加回调查看响应
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    const response = JSON.parse(request.responseText);
    console.log(response.msg);
  } else {
    console.log('请求出错');
  }
};

jQuery Ajax版本： #

var targetNum = '你要传递的数字或文本';
$.ajax({
 type: 'POST',
 url: 'http://172.0.0.1:8080', // 补全端口号
 data: JSON.stringify({data: targetNum}), // 转成JSON字符串
 contentType: 'application/json;charset=utf-8', // 必须设置这个，服务端才能正确解析
 crossDomain: true,
 success: function (data) {
  console.log(data.msg);
 },
 error: function (xhr, status, error) {
  console.log('Error: ' + error.message);
  console.log('Error connecting to the server.');
 }
});

关键细节说明 #

• 跨域预检请求：浏览器在发送跨域POST（尤其是带自定义Content-Type）时，会先发送OPTIONS请求验证权限，服务端必须处理这个请求并返回正确的CORS头，否则浏览器会拦截后续的POST请求。
• POST数据接收：Node.js的req是流对象，数据会分块传输，所以需要在data事件中拼接所有片段，等到end事件触发时再处理完整的数据。
• 地址匹配：客户端请求的地址必须和服务端监听的地址完全一致（包括IP/域名、端口），否则会出现跨域或连接失败的问题。

现在按照这个代码修改后，你应该能在服务端控制台看到客户端传递的数字，同时跨域报错也会消失啦！

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