Node.js Express API本地调用Angular前端时出现CORS错误求助

问题分析 #

从报错信息和代码来看，核心问题有两点：

• 前端请求URL缺失http://协议头，浏览器判定该请求不符合跨源请求的合法协议规范
• 后端代码存在语法错误、重复CORS配置，导致跨域规则未正确生效

分步解决方案 #

1. 修正前端请求URL #

将Angular中请求地址从localhost:3000/api/auth/login改为http://localhost:3000/api/auth/login，必须包含完整的HTTP协议前缀。

2. 修复后端代码语法错误 #

手动设置CORS头的中间件缺少闭合括号，导致代码无法正常执行，修改后如下：

app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
    next();
}); // 补上缺失的闭合括号和分号

3. 移除重复的CORS配置 #

不要同时使用cors包和手动设置响应头，二者选其一即可。推荐使用cors包，配置更简洁可靠：

// 保留cors包配置，删除手动设置头的中间件
const cors = require("cors");
app.use(cors({ origin: "http://localhost:4200" })); // 明确指定允许的源，比通配符*更安全

4. 修正路由拼写错误 #

路由路径存在拼写错误：/api/aplications应改为/api/applications，和导入的路由文件名保持一致：

app.use("/api/applications", applications); // 修正aplications为applications

5. 调整中间件加载顺序 #

确保cors中间件在所有路由之前加载，正确的代码结构如下：

const express = require("express");
const app = express();
const dotEnv = require("dotenv");
const mongoose = require("mongoose");
const cors = require("cors");

dotEnv.config(); // 先加载环境变量

app.use(cors({ origin: "http://localhost:4200" })); // CORS中间件放在最前面
app.use(express.json()); // 解析JSON请求体的中间件

mongoose.set("strictQuery", false);
mongoose.connect(process.env.DB_URL).then(function(){
    console.log("connected to database");
});

const applications = require("./routes/applications"), // 加上const声明，避免全局变量
      auth = require("./routes/auth");

app.use("/api/applications", applications);
app.use("/api/auth/", auth);

const PORT = process.env.PORT || 3000;

app.listen(PORT, function(){
    console.log(Date.now())
    console.log("server started on port", PORT);
})

验证步骤 #

1. 重启Express服务器
2. 在Angular应用中重新发起请求，确认URL包含http://前缀
3. 检查浏览器控制台是否仍有CORS错误

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