Azure Node.js后端与Cloudflare React前端的CORS问题排查求助

一、先搞定网络连通性（核心问题：ERR_NETWORK+状态码null说明请求根本没到后端） #

• 先用curl或Postman直接访问后端地址：https://<Azure虚拟机IP>:3000/api/articles?title=test，验证能否拿到正常响应。如果连不通，按以下步骤排查：
  1. 检查Azure网络安全组（NSG）：必须添加入站规则，允许TCP 3000端口的外部访问。要更安全的话，源地址可限制为Cloudflare官方IP段，避免直接开放给所有地址。
  2. 检查Windows虚拟机本地防火墙：打开Windows Defender防火墙高级设置，添加入站规则，放行3000端口的TCP连接。
  3. 确认后端HTTPS服务配置正确：Express默认是HTTP服务，需手动配置HTTPS启动，示例代码：

     const https = require('https');
     const fs = require('fs');
     const express = require('express');
     const cors = require('cors');
     const app = express();
     
     app.use(cors());
     // 你的路由逻辑...
     
     // 替换为证书实际路径
     const sslOptions = {
       key: fs.readFileSync('./private-key.pem'),
       cert: fs.readFileSync('./certificate.pem')
     };
     
     https.createServer(sslOptions, app).listen(3000, () => {
       console.log('HTTPS server running on port 3000');
     });
     

     如果用IIS等反向代理实现HTTPS，需确保代理规则正确，将外部HTTPS请求转发到本地3000端口的HTTP服务。

二、调整CORS配置（网络通后仍报错时处理） #

• 不要用默认的app.use(cors())，明确指定允许的前端域名（Cloudflare托管的前端域名），避免模糊配置的潜在问题：

  const corsOptions = {
    origin: 'https://your-frontend-cloudflare-domain.com', // 替换为你的前端域名
    credentials: true, // 前端带cookie/认证信息时必须开启
    optionsSuccessStatus: 200
  };
  app.use(cors(corsOptions));
  

• 确保自定义路由中间件不会拦截OPTIONS请求——Express的cors中间件会自动处理预检请求，但如果有自定义拦截逻辑，不要阻断OPTIONS请求。

三、Cloudflare侧配置检查 #

• 不要让前端直接请求虚拟机IP，给IP绑定域名，并用Cloudflare为该域名配置免费证书，避免浏览器因“证书域名与请求IP不匹配”拒绝连接。
• 将Cloudflare的SSL/TLS模式设为Full或Full (strict)，确保全程HTTPS连接。
• 暂时关闭Cloudflare的Bot Fight Mode或把Security Level调为Essentially Off，排查是否是安全规则拦截了请求。

四、浏览器端细节检查 #

• 打开浏览器控制台的Network标签，查看请求具体状态：是Failed还是Blocked？检查请求头的Origin是否为前端域名，后端返回的Access-Control-Allow-Origin是否与之匹配。
• 确认Axios的baseURL配置正确，不要混合使用HTTP和HTTPS，例如baseURL需设为https://your-backend-domain:3000而非HTTP开头。

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