Angular配置代理后仍出现CORS跨域请求失败该如何解决？

• 代理规则未生效：你配置的Angular代理仅匹配/front-v1前缀的请求，但当前直接请求http://localhost:3000/india全路径地址，没有走Angular开发服务器的代理转发，直接触发跨域限制。
• 前端请求头配置错误：Access-Control-Allow-Origin类字段属于后端返回的响应头，前端主动在请求头中添加这类字段会导致CORS预检请求失败，完全不需要配置。
• NestJS侧CORS配置重复冗余：同时使用自定义中间件和enableCors配置CORS，容易产生规则冲突。

1. 修正Angular代理配置 #

修改proxy.conf.json，添加changeOrigin和路径重写规则，确保/front-v1前缀的请求会被转发到后端接口：

{
    "/front-v1": {
        "target": "http://localhost:3000",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
            "^/front-v1": ""
        },
        "logLevel": "debug"
    }
}

确认angular.json中serve配置正确引入代理文件：
找到projects -> 你的项目名 -> architect -> serve -> options，确保存在以下配置：

"proxyConfig": "proxy.conf.json"

2. 修正Angular请求代码 #

删除所有自定义的CORS相关请求头，请求地址改为带代理前缀的相对路径：

async getData() {
    // 路径/front-v1/india会被代理转发到http://localhost:3000/india
    return this.http.get('/front-v1/india', {
      responseType: 'json'
    }).pipe((result) => {
      return result;
    });
}

3. 修正NestJS CORS配置 #

删除冗余的自定义CORS中间件，仅保留enableCors配置即可：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    allowedHeaders: "*",
    origin: "*",
  });
  await app.listen(3000);
}
bootstrap();

重启Angular开发服务（必须重新执行ng serve才会加载新的代理配置），通过http://localhost:4200访问前端页面即可正常请求后端接口。

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