ReactJS调用同VPS的HTTPS NodeJS API 已配置CORS仍报请求失败

核心问题定位 #

• 前端请求地址完全错误：报错信息显示你请求的API地址是https://localhost:8184/api/v1/signin，线上环境下localhost指向的是访问网站的用户本地设备，不是你的VPS服务器，请求根本没有发送到你的Node服务，这就是状态码显示(null)的直接原因。
• Node端CORS配置冲突且顺序错误：
• 同时使用自定义allowCrossDomain中间件和cors包，二者跨域规则冲突：一个配置Access-Control-Allow-Origin为*，一个写死允许源为https://mydomaindotcom，且你代码里的域名前后不一致，和前端配置的https://mydomain不匹配，跨域校验必然失败。
• CORS中间件放在了日志、bodyParser、fileUpload、路由等其他中间件之后，浏览器发送的OPTIONS预检请求会先被其他中间件拦截，根本走不到CORS处理逻辑，无法返回合法跨域头。
• 自定义响应头存在语法错误：Access-Control-Allow-Methods末尾多了多余的逗号，部分浏览器会直接判定该响应头无效。
• React端配置无效：package.json中的homepage字段仅影响build后静态资源的引用路径，不会修改你代码里硬编码的API请求地址；自定义的Hostname字段不会被React构建工具识别，没有任何实际作用。

分步修复操作 #

1. 修正前端API请求地址 #

同服务器部署前后端优先选择Nginx反向代理方案，彻底避免跨域问题：

• 在Nginx中配置规则，将https://mydomain/api路径的请求直接转发到Node服务监听的本地8184端口，配置示例：

location /api/ {
    proxy_pass https://127.0.0.1:8184/api/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

• 前端代码中API请求统一使用相对路径/api/v1/xxx，不需要写域名和端口，也不会触发跨域校验。

如果不使用反向代理，必须把前端代码里所有API请求的baseURL改成Node服务对外可访问的公网HTTPS地址（比如https://mydomain:8184），绝对不能写localhost，同时要确认服务器安全组、防火墙开放8184端口，Node的HTTPS服务绑定地址为0.0.0.0而非127.0.0.1，否则公网无法访问。

2. 重构Node端CORS配置 #

删除重复的自定义allowCrossDomain中间件，将CORS中间件放到所有中间件、路由的最顶部，修正后参考代码：

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

// CORS配置必须放在所有中间件最前面
app.use(cors({
  // 这里必须和浏览器访问前端的域名完全一致，带协议，不带尾斜杠，有www就加www
  origin: 'https://mydomain',
  credentials: false,
  maxAge: 86400,
  allowedHeaders: 'Authorization, X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept',
  methods: 'GET,POST,PUT,PATCH,DELETE,OPTIONS'
}));

// 统一处理所有OPTIONS预检请求，直接返回204
app.options('*', (req, res) => {
  res.sendStatus(204);
});

// 后续再加载其他业务中间件和路由
app.use(logger('dev', {
    skip: function (req, res) { return res.statusCode < 400 },
    stream: fileWriter
}))
app.use(logger('dev'));
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(fileUpload());
app.use("/api/v1", routes);

注意：origin配置必须和浏览器地址栏显示的前端访问域名完全匹配，差一个www、差http/https、多一个尾斜杠都会导致跨域校验失败。

3. 验证修复结果 #

• 重启Node服务、Nginx（如果用了反向代理），清空浏览器缓存后重新测试。
• 打开浏览器开发者工具-网络面板，确认signin请求的目标地址不是localhost，且OPTIONS预检请求的响应头中包含正确的Access-Control-Allow-Origin字段，值和请求的Origin头完全一致即为配置生效。

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