XMLHttpRequest请求Node服务异常：readyState4、status0及跨域问题咨询

这个问题我之前也碰到过，核心原因其实是浏览器的同源策略在搞鬼——哪怕都是localhost，只要端口、协议或者域名有一个不一样，浏览器就会判定为跨域请求，直接拦截XHR的响应，导致你看到readyState 4但status 0的情况。curl和Postman不受浏览器同源策略限制，所以能正常请求。

下面给你几个可行的解决方案：

1. 使用CORS中间件快速配置（推荐，适合Express等框架） #

如果你的Node服务用了Express这类框架，最省心的方式是用官方的cors中间件：

首先安装依赖：

npm install cors

然后在服务代码中启用：

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

// 开发环境可以允许所有来源（生产环境务必指定具体域名）
app.use(cors());

// 生产环境建议限制来源，比如只允许前端页面所在的域名：
// app.use(cors({
//   origin: 'http://localhost:3000' // 替换成你的前端页面地址
// }));

// 你的业务路由
app.get('/api/data', (req, res) => {
  res.json({ message: 'Success from Node server!' });
});

app.listen(8080, () => {
  console.log('Server running on http://localhost:8080');
});

2. 手动设置CORS响应头（适合原生Node服务） #

如果你的服务是用Node原生http模块写的，可以手动添加CORS相关的响应头，同时处理浏览器发送的OPTIONS预检请求：

const http = require('http');

const server = http.createServer((req, res) => {
  // 允许指定来源的跨域请求，*代表所有来源（生产环境不建议用）
  res.setHeader('Access-Control-Allow-Origin', '*');
  // 允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  // 允许的请求头，如果你的XHR带了自定义头，这里要对应加上
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  // 处理OPTIONS预检请求：浏览器会在发送实际请求前先OPTIONS请求，必须返回200
  if (req.method === 'OPTIONS') {
    res.writeHead(200);
    res.end();
    return;
  }

  // 处理实际业务请求
  if (req.url === '/api/data' && req.method === 'GET') {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ message: 'Success from Node server!' }));
  } else {
    res.writeHead(404);
    res.end('Not Found');
  }
});

server.listen(8080, () => {
  console.log('Server running on http://localhost:8080');
});

额外注意事项 #

• 生产环境绝对不要用Access-Control-Allow-Origin: *，一定要指定具体的前端域名，避免安全风险。
• 如果你的XHR请求带了自定义请求头（比如Authorization），需要在服务端的Access-Control-Allow-Headers里加上对应的头名称。
• 可以打开浏览器开发者工具的「网络」面板，查看OPTIONS请求的响应状态，如果是404或者500，说明服务端没正确处理预检请求，需要排查代码。

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