部署在Heroku的客户端/服务端应用CORS跨域问题排查

你的CORS配置触发了精确匹配不兼容问题：

• 服务端配置的origin末尾多了一个斜杠："https://client-fox-67890fghij.herokuapp.com/"
• 浏览器识别的客户端实际来源域名是不带末尾斜杠的：https://client-fox-67890fghij.herokuapp.com
  CORS的Access-Control-Allow-Origin头要求完全精确匹配，两者不一致就会触发跨域拦截。本地运行正常是因为你当时配置的origin是"http://localhost:3000"（无末尾斜杠），和客户端来源完全匹配。

1. 修正服务端CORS配置，去掉origin末尾的斜杠：

server.use(cors({origin: "https://client-fox-67890fghij.herokuapp.com"}));

2. （更推荐）用环境变量动态配置，避免硬编码域名，同时防止类似字符匹配问题：
   • 在Heroku服务端应用的环境变量中添加CLIENT_ORIGIN，值为客户端的Heroku地址（无末尾斜杠）
   • 修改服务端代码：

server.use(cors({origin: process.env.CLIENT_ORIGIN}));

可以用curl命令测试服务端接口返回的CORS头：

curl -I https://server-wolf-12345abcde.herokuapp.com/json-data

查看返回的Access-Control-Allow-Origin字段，确认和客户端地址完全一致（无多余斜杠）。

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