Angular 16调用Node.js REST API遇CORS跨域错误求助

问题根源 #

浏览器的CORS安全机制拦截了跨域请求——你的Angular项目运行在http://localhost:4200，后端API部署在http://localhost:9003，二者端口不同属于不同源。而Postman是独立请求工具，浏览器直接在地址栏访问属于普通GET请求，都不会触发CORS校验机制，因此能正常获取数据。

解决方案 #

方法1：使用cors npm包（推荐，简单高效） #

这是Express生态处理CORS的标准方案：

1. 在Node.js项目根目录执行安装命令：

npm install cors

2. 在Express主入口文件（如app.js/server.js）中引入并配置：

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

// 开发环境可直接允许所有源，生产环境建议指定具体域名
app.use(cors());

// 生产环境示例：仅允许Angular所在域名访问
// app.use(cors({
//   origin: 'http://localhost:4200'
// }));

// 务必在挂载API路由前配置CORS中间件
app.use('/master', api);

方法2：手动设置响应头（无需额外安装依赖） #

如果不想新增依赖，可通过全局中间件手动添加CORS响应头：

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

// 全局CORS处理中间件
app.use((req, res, next) => {
  // 指定允许访问的源，*代表所有源（生产环境不建议使用*）
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
  // 允许的HTTP请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  // 允许携带的请求头
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  // 处理浏览器预检OPTIONS请求
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

// 挂载API路由
app.use('/master', api);

额外修正：Angular类型不匹配问题 #

你的API返回的是Region对象数组，但Angular服务中getAllRegion()声明返回Observable<RegionI>（单个对象），会导致后续数据处理报错，需修改服务代码：

getAllRegion(): Observable<RegionI[]> {      
  const regionUrl = this.serverUrl + '/getRegion';     
  return this.httpClient.get<RegionI[]>(regionUrl); 
}

同时组件内的regionValue需声明为数组类型：

regionValue: RegionI[] = [];

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