Angular + Node.js CORS问题：除Chrome外资源无法加载

1. 先解决404核心问题 #

报错里的Status code: 404是关键——你的后端未定义/api/news路由，服务器返回404错误时，该响应未经过CORS中间件处理，才会出现CORS头缺失的提示。

• 检查后端代码，确认是否正确注册/api/news路由（比如app.get('/api/news', (req, res) => { ... })）
• 确保路由定义在CORS中间件之后（Express中间件按顺序执行，路由需在CORS配置之后才能继承其头信息）

2. 清理冗余的CORS配置 #

代码中多处重复配置会导致逻辑混乱，优化后如下：

const express = require('express');
const cors = require('cors');
const app = express();
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const PORT = process.env.PORT || 3000;

// 全局CORS中间件（必须放在所有路由、静态资源之前）
app.use(cors({
    origin: 'http://localhost:4200',
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
}));

app.use(express.json());

const SECRET_KEY = 'your_secret_key'; // 替换为安全的随机密钥

// 仅保留一次静态资源配置，CORS头由全局中间件自动处理
app.use('/assets', express.static(path.join(__dirname, 'assets')));

// 数据库连接
const db = new sqlite3.Database('./news_portal.db', (err) => {
  if (err) {
    console.error('Could not connect to database', err);
  } else {
    console.log('Connected to the SQLite database.');
  }
});

// 必须添加/api/news路由定义
app.get('/api/news', (req, res) => {
  // 示例：从数据库查询新闻数据
  db.all('SELECT * FROM news', (err, rows) => {
    if (err) {
      res.status(500).json({ error: err.message });
      return;
    }
    res.json(rows);
  });
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

优化点说明：

• 移除重复的/assets静态资源注册，全局CORS中间件会自动处理静态资源的跨域请求
• 删除冗余的app.options('*', cors())，cors()中间件已自动处理OPTIONS预检请求

3. 解决跨设备访问问题 #

手机及其他网络设备无法访问的额外处理：

• 设备不能用localhost访问后端，需使用你的电脑局域网IP（如http://192.168.x.x:3000），同时修改CORS的origin配置，允许前端的实际访问地址（测试阶段可临时用*，生产环境需指定具体域名）
• 确保电脑防火墙允许3000端口的入站请求
• Angular前端的API基础地址需改为局域网IP，而非localhost

4. 验证CORS配置有效性 #

用curl命令测试OPTIONS预检请求：

curl -X OPTIONS http://localhost:3000/api/news -H "Origin: http://localhost:4200" -v

若响应头包含Access-Control-Allow-Origin: http://localhost:4200，说明CORS配置生效。

内容的提问来源于stack exchange，提问作者Matías Huartamendía