Angular向本地API提交数据时遭遇CORS策略错误，该如何解决？

核心问题分析 #

你的请求URL localhost:5000/home缺少http://协议前缀。浏览器会将这种无协议的地址判定为非HTTP/HTTPS协议的资源，直接触发CORS策略拦截，请求根本不会发送到后端服务器，因此你在Express端配置的CORS规则完全没有生效。

解决步骤 #

1. 修正Angular中的请求URL #

将this.url的值修改为带协议的完整地址：

// 正确的URL格式示例
this.url = 'http://localhost:5000/home';

2. 确认Express端CORS配置有效性 #

虽然本次问题根源不在后端，但确保配置正确可以避免后续问题：

• 先确认已安装cors依赖：

  npm install cors
  

• 在Express入口文件中正确配置CORS中间件：

  const cors = require('cors');
  const express = require('express');
  const app = express();
  
  // 允许指定源访问（推荐生产/开发环境使用）
  app.use(cors({
    origin: "http://localhost:4200"
  }));
  
  // 仅开发环境临时测试可允许所有源（不推荐生产环境）
  // app.use(cors());
  
  // 后续路由与服务器监听配置
  app.listen(5000, () => console.log('API running on port 5000'));
  

3. 开发环境可选方案：Angular代理配置 #

开发阶段可以通过Angular的代理功能绕过CORS限制，无需修改后端配置：

1. 在项目根目录创建proxy.conf.json文件：

   {
     "/api/*": {
       "target": "http://localhost:5000",
       "secure": false,
       "changeOrigin": true
     }
   }
   

2. 修改angular.json中serve配置的options，添加代理配置：

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "browserTarget": "your-project-name:build",
       "proxyConfig": "proxy.conf.json"
     },
     // 其他配置项...
   }
   

3. 重启Angular开发服务器，之后请求/api/home会自动代理到http://localhost:5000/home。

内容的提问来源于stack exchange，提问作者Abdulrashid Sani Imam