Angular调用Fake API遭遇CORS错误，求解决方案

报错信息 #

Access to XMLHttpRequest at 'https://<redacted>/api/BigBasket/GetAllProducts' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

可用解决方案 #

1. 后端配置CORS（根本解决方式）

CORS本质是后端需在响应头中添加跨域许可配置，这是生产环境的标准解决办法：

• 要求后端团队在响应头中添加 Access-Control-Allow-Origin，开发环境可设为http://localhost:4200，生产环境替换为正式前端域名；若允许所有域名（不推荐生产）可设为*
• 不同后端框架的配置示例：
  • ASP.NET Core：在Startup.cs中配置CORS中间件

    services.AddCors(options =>
    {
        options.AddPolicy("AllowFrontend",
            policy => policy.WithOrigins("http://localhost:4200")
                            .AllowAnyHeader()
                            .AllowAnyMethod());
    });
    
    // 在Configure方法中启用
    app.UseCors("AllowFrontend");
    

  • Node.js/Express：使用cors包快速配置

    const cors = require('cors');
    // 仅允许指定域名跨域
    app.use(cors({ origin: 'http://localhost:4200' }));
    

2. Angular代理配置（开发环境临时方案）

通过Angular代理转发请求，绕过浏览器的CORS检查：

• 在项目根目录创建proxy.conf.json文件，内容如下：

  {
    "/api/BigBasket/*": {
      "target": "https://<redacted>",
      "secure": false,
      "changeOrigin": true
    }
  }
  

• 修改angular.json中的serve配置，添加代理文件路径：

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "你的项目名称:build",
      "proxyConfig": "proxy.conf.json"
    }
  }
  

• 调整常量配置为相对路径：

  API_END_POINT: '/api/BigBasket/',
  

• 重启Angular开发服务器，请求会自动通过代理转发，解决跨域问题

3. 浏览器扩展临时绕过（仅测试用）

安装Chrome扩展如「Allow CORS: Access-Control-Allow-Origin」，开启后可临时跳过浏览器的CORS检查，仅适合本地开发测试，绝对不能用于生产环境。

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