已启用Nest.js/Angular CORS但请求仍出现跨域错误求助

问题核心 #

你的CORS错误源于两处配置失误：前端错误添加了仅后端需返回的响应头，以及后端origin地址配置存在格式错误。

修复步骤 #

1. 修正后端Nest.js的CORS配置 #

后端main.ts中origin字段末尾的斜杠会导致浏览器源地址匹配失败，同时补充必要的HTTP方法许可：

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

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: 'http://localhost:4200', // 移除末尾多余的斜杠
    allowedHeaders: '*', // 允许所有请求头，也可按需指定具体字段
    methods: 'GET,POST,OPTIONS' // 明确允许业务所需的HTTP方法
  });
  await app.listen(3000);
}

bootstrap().then(function() {
  console.log("\nReady for maths!");
}); 

2. 清理前端Angular的请求头冗余配置 #

Access-Control-Allow-Origin是后端返回给浏览器的响应头，前端请求时添加该头会干扰CORS校验；同时GET请求无需设置content-type: application/x-www-form-urlencoded，修改opcode.service.ts：

import { Injectable } from '@angular/core';
import { Enviornment } from '../enviornment';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class OpcodeService {
  supportedOpcodes: string[] = [];

  constructor(private http: HttpClient) {}

  getListOfSupportedOpcodes() {
    // 移除不必要的自定义请求头，HttpClient会自动处理默认请求头
    return this.http.get(Enviornment.serverUrl + "/opcode");
  }
}

3. 额外验证点 #

• 确认Angular应用运行端口确实为4200
• 重启前后端服务，确保配置生效
• 若仍有问题，可临时将origin设为*测试（生产环境禁用），排查是否为源地址匹配问题

效果验证 #

修改完成后重新启动服务，前端初始化时将正常获取Opcode列表，CORS错误将被解决。

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