我正在构建一个小计算器应用程序来学习Nest.js和Angular。我已经建立了一个服务器，它托管了一个简单的Web API，有几个端点，其中一个端点返回后端当前支持的所有操作码的列表。我试图获取（在init上）并使用此列表来填充前端的下拉选择器。

前端

calculator-app/src/app/calculator-form/保存使用请求的表单组件。它所做的就是调用OpcodeService.getSupportedOpcodes()并记录结果。在这一点上，我知道我需要对result对象做更多的工作，但是由于CORS错误，我还没有做到这一步。

import { Component } from '@angular/core';
import { OpcodeService } from '../services/opcode.service';

@Component({
  selector: 'app-calculator-form',
  templateUrl: './calculator-form.component.html',
  styleUrls: ['./calculator-form.component.scss'],
  providers: [ OpcodeService ]
})
export class CalculatorFormComponent {
  supportedOpcodes: string[] = ['?']

  constructor(private opcodeService: OpcodeService) {}

  ngOnInit() {
    this.opcodeService.getListOfSupportedOpcodes().subscribe(res => {
      console.log(res);
    })
  }
}

字符串
calculator-app/src/app/services/opcode.service.ts发出实际的HTTP请求。当我使用Postman进行测试时，这个端点可以按预期工作，并且我尽了最大努力来模拟使用Postman的头。这也是相当简单的，但可能我在这里遗漏了一些配置。

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

@Injectable({
  // declares that this service should be created
  // by the root application injector.
  providedIn: 'root'
})
export class OpcodeService {
  supportedOpcodes: string[] = [];

  constructor(private http: HttpClient) {}

  getListOfSupportedOpcodes() {
    const headers = new HttpHeaders()
      .set('content-type', 'application/x-www-form-urlencoded')
      .set('Access-Control-Allow-Origin', '*');
    
    return this.http.get(Enviornment.serverUrl + "/opcode", {'headers':  headers});
  }
}

型

后台

我有理由相信我的路由没有问题。如上所述，我能够看到GET -> localhost：3000/opcode返回的值。下面是我的main.ts文件，带有enableCors()配置对象。

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

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    allowedHeaders: ['content-type'],
    origin: 'http://localhost:4200/'
  });
  await app.listen(3000);
}

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

型
Screen capture of CORS error in Chrome
我已经尝试使用允许的头启用CORS。我知道Nest.js在默认情况下解析form-data有问题，所以我尝试设置GET请求的头部。已尝试在this post之后设置原点。
Here is the full repository. Feel free to open issues with any other feedback!