你的跨域问题核心在于没有正确处理CORS预检请求（OPTIONS请求），同时路由配置也存在逻辑漏洞，我来一步步拆解并给出修复方案：

为什么原代码会报错？ #

1. 你的前端发送的是PUT请求，这属于CORS规范中的非简单请求，浏览器会自动先发送一个OPTIONS预检请求，询问服务器是否允许该PUT请求的跨域访问。
2. 最初的代码只配置了GET路由，完全没处理OPTIONS请求，导致预检直接失败，触发跨域错误。
3. 后来改用app.all的版本，虽然覆盖了所有请求方法，但你把res.send()放在了next()前面——这会直接结束请求响应周期，next()根本不会执行，而且这个配置也没有针对OPTIONS请求做特殊处理（预检请求不需要返回业务内容，只需要返回正确的CORS头即可）。

修正后的后端代码 #

var express = require('express'); 
var app = express(); 
var responsePort = 3001; 

// 全局CORS中间件，处理预检请求和设置跨域头
app.use(function(req, res, next) {
  // 允许指定源跨域
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  // 允许的请求方法，必须包含你实际使用的PUT
  res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
  // 允许的请求头（如果有自定义头需要添加，这里是常用默认值）
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  
  // 针对OPTIONS预检请求，直接返回200状态，不需要业务响应
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

// 处理PUT请求的业务逻辑
app.put('/', (req, res) => { 
  res.send("Hello world from CROS.😡"); 
});

// 可选：保留GET请求的处理（如果需要的话）
app.get('/', (req, res) => { 
  res.send("Hello world from CROS (GET).😎"); 
});

app.listen(responsePort, function () { 
  console.log('cros_responser is listening on port '+ responsePort); 
});

关键细节说明 #

• 优先处理OPTIONS请求：浏览器发送的预检请求是OPTIONS方法，我们需要直接返回200状态，让浏览器确认跨域权限后，再发送实际的PUT请求。
• CORS头的完整性：Access-Control-Allow-Methods必须明确包含你实际使用的请求方法（这里是PUT），否则预检会失败。
• 中间件顺序：把CORS中间件放在所有路由前面，确保所有请求都能先经过跨域头的设置。
• 避免响应逻辑冲突：不要在中间件里提前调用res.send()，否则会直接结束请求，后续路由逻辑无法触发。

这样修改后，你的前端PUT请求就能正常通过跨域校验，拿到后端返回的内容了。

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