部署至Render后出现CORS错误，本地运行正常

问题核心 #

部署至Render平台后，OPTIONS预检请求触发CORS错误，本地运行正常。问题根源集中在请求头配置错误、CORS中间件参数不规范、服务未正常启动三个层面。

修复步骤 #

1. 修正前端请求配置 #

前端无需设置Access-Control-Allow-Origin（这是后端专属响应头），移除该字段；若需携带凭证，添加credentials: 'include'与后端配置匹配：

async function loginUser(credentials) {
    return fetch('https://slugga-api.onrender.com/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify(credentials)
    })
    .then(data => data.json())
}

2. 规范后端CORS中间件配置 #

原代码中cors的headers参数写法错误，改用官方标准配置项：

const app = express();
// 正确配置CORS规则
app.use(cors({
    origin: "https://slug-panel.onrender.com",
    credentials: true, // 允许跨域携带凭证
    allowedHeaders: ["Content-Type"], // 明确允许的请求头
    methods: ["GET", "POST", "OPTIONS"] // 包含预检请求所需的OPTIONS方法
}));
// 手动兜底处理所有OPTIONS请求，避免路由覆盖遗漏
app.options('*', cors());

3. 排查服务运行状态 #

CORS请求失败常伴随服务未正常启动：

• 修正数据库连接字符串：原代码中mongodb:/<username>:<password>@...缺少一个斜杠，改为mongodb://<username>:<password>@slug-db:27017/usarAdmin?authSource=admin。
• 添加健康检查路由，确保Render能检测到服务在线：

app.get('/', (req, res) => {
    res.status(200).send('API is running');
});

4. 验证Render平台配置 #

• 确认服务使用process.env.PORT监听端口（你的代码已正确配置）。
• 检查Render环境变量，确保数据库用户名、密码等参数正确无误。

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