Node.js Express服务器跨域请求被拦截，配置响应头仍报错

阿华AIGC实验室

2026-5-29

问题分析与解决方案

让我帮你排查这个跨域问题，其实问题出在两个关键地方：服务器端的语法错误，以及客户端做了不必要的请求头设置。

首先看最致命的问题——服务器端的语法错误：你写的 res.header('Access-Control-Allow-Origin'. '*'); 里，把参数分隔的逗号写成了点号（.），这会导致这条核心的CORS响应头根本没有被正确设置，浏览器自然会提示“CORS header ‘Access-Control-Allow-Origin’ missing”。

其次，客户端代码多做了无用功：Access-Control-Allow-Origin、Access-Control-Allow-Methods 这些都是服务器返回给浏览器的响应头，客户端发起请求时完全不需要设置这些头，反而会干扰正常的CORS校验流程。

修正后的服务器代码

app.get('/api', function(req, res){ 
  // 把点号改成逗号！这是核心修复点
  res.header('Access-Control-Allow-Origin', '*'); 
  res.header('Access-Control-Allow-Methods', 'GET'); 
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); 
  res.status(200).send({'a':'b'}); 
});

修正后的客户端代码

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function(){ 
  if(this.readyState === 4 && this.status === 200){ 
    console.log(this.response); 
  } 
}; 
xhr.open('GET', 'http://www.example.com/api', true); 
// 删掉这三行不必要的请求头设置，它们不属于客户端该发的内容
// xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); 
// xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET'); 
// xhr.setRequestHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); 
xhr.send(null);

额外优化建议

如果你的Express项目里有多个需要跨域的接口，推荐使用官方维护的 cors 中间件，这样更简洁也不容易出错：

先安装依赖：npm install cors
在项目中配置使用：

const cors = require('cors');
// 全局配置跨域规则
app.use(cors({
  origin: '*',
  methods: ['GET'],
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept']
}));

// 之后你的/api接口就不用重复设置响应头了
app.get('/api', function(req, res){ 
  res.status(200).send({'a':'b'}); 
});

这样修改后，Firefox就能正常处理跨域请求了。

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