Angular 5调用API遇CORS错误，求Node可识别的项目内配置位置

首先得明确一个关键点：你完全不需要在Angular 5应用的代码里添加任何CORS中间件——因为Angular是前端框架，运行在浏览器中，而CORS是浏览器的安全限制，真正需要配置CORS规则的是你的后端API服务器。不过在开发阶段，Angular CLI提供了一个非常方便的代理方案，可以帮你绕开这个问题，不用临时修改后端配置。

一、开发环境临时解决：使用Angular CLI代理 #

这个方案只适用于本地开发时绕过浏览器的CORS限制，生产环境不能用。

1. 在Angular项目根目录创建proxy.conf.json文件，填入以下内容：

{
  "/api": {
    "target": "http://localhost/someapi",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

• /api：自定义的请求代理前缀（可以根据你的API路径调整，比如/api/v1）
• target：你的后端API服务器地址（对应你例子里的localhost/someapi）
• changeOrigin：必须设为true，它会修改请求头的Host字段，让后端认为请求来自合法源
• pathRewrite：自动去除请求里的/api前缀，确保转发到后端的路径是正确的（比如把/api/token转成/token）

2. 修改项目启动命令
   打开package.json，找到scripts里的start命令，更新为：

"start": "ng serve --proxy-config proxy.conf.json"

之后用npm start启动项目，Angular CLI会自动加载这个代理配置。

3. 调整你的API调用代码
   把原来的API路径改成代理前缀开头的路径，比如你原来的this.appConfig.baseRoute + 'token'替换成/api/token：

getToken(): void {
  let headers = new Headers({'Content-type': 'application/x-www-form-urlencoded'});
  let params = new URLSearchParams();
  params.append('username','some-username');
  params.append('password', 'some-encripted-password');
  params.append('grant_type', 'password');
  let options = new RequestOptions();
  options.headers = headers;
  
  // 使用代理后的路径发起请求
  this.http
    .post('/api/token', params.toString(), options)
    .subscribe(result => {
      // 处理返回结果
    });
}

这样开发时，所有/api开头的请求都会被自动转发到你的后端API服务器，浏览器就不会触发CORS错误了。

二、生产环境正确解决：在后端配置CORS中间件 #

开发代理只是临时方案，生产环境必须在你的后端API服务器上配置CORS规则，允许你的Angular应用域名访问。

如果你的后端是Node.js（Express框架），可以这么做：

1. 安装cors包：

npm install cors --save

2. 在你的Express应用代码中引入并使用CORS中间件：

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

// 开发时可临时允许所有源（生产环境不建议）
app.use(cors());

// 生产环境建议指定允许的特定源（比如你的Angular应用部署域名）
// app.use(cors({ origin: 'https://your-angular-app-domain.com' }));

// 继续配置你的API路由
app.post('/token', (req, res) => {
  // 处理token请求逻辑
});

如果你的后端是其他语言（比如Java、Python），也有对应的CORS配置方式，核心都是在响应头中添加Access-Control-Allow-Origin等相关字段。

回到你的核心疑问：你不需要在Angular 5应用的任何位置配置让Node读取的CORS中间件——CORS配置是后端服务器的工作，Angular作为前端只负责发起请求，开发时的代理只是CLI提供的便捷工具而已。

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