API 请求返回尝试从 Angular 前端访问 NestJS 后端的错误

Question

当 API 调用我的 NestJS 应用程序时，我收到以下错误。

core.js:6185 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://localhost:3333/api/product-index", ok: false, …}

和

GET https://localhost:3333/api/product-index net::ERR_SSL_PROTOCOL_ERROR

通过单独查看 Nest、Angular 和 NGXS 以及建议的处理方法，我已正确设置所有内容。我唯一能想到的就是修改对 localhost:3333/api 的引用，看看我是否正在定位一个不存在的位置。我注意到，当我将 https 更改为 http 时，我收到一个 CORS 错误，即使在 main.ts 文件中包含 enableCors() 也不会消失。我看过并阅读了一些将 NestJS 连接到 Angular 的教程，一旦他们设置好文件，它就可以正常工作。我一直在查看 nrwl 网站上的教程，据我所知，我已经正确设置了所有内容。

这是 main.ts 文件在我的 Nest 应用程序中的样子

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const globalPrefix = 'api';
  app.setGlobalPrefix(globalPrefix);
  const port = process.env.port || 3333;
  await app.listen(port, () => {
    console.log('Listening at http://localhost:' + port + '/' + globalPrefix);
  });
}

bootstrap();

angular.json 文件中我的前端项目的 serve 数据如下所示

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "browserTarget": "cre8or-maker:build",
    "proxyConfig": "apps/cre8or-maker/proxy.conf.json"
}

我的前端项目中的 proxy.conf.json 文件如下所示

{
    "/api": {
      "target": "https://localhost:3333",
      "secure": false,
      "logLevel": "debug"
    }
}

我的 NGXS 模块中有一个服务文件，它向 Nest 应用程序中的 product-index 控制器发出请求，如下所示

export class ProductIndexService{

    constructor(private httpClient: HttpClient){}

    private readonly URL: string = 'https://localhost:3333/api';




    public fetchProductIndexList():Observable<CattegoryIndexItem[]>{
        const path: string = this.URL + '/product-index';

        return this.httpClient.get(path) as Observable<CattegoryIndexItem[]>;
    }
}

我的environments/environments.ts文件

export const environment = {
  production: false,
  apiUrl: '/api'
};

我的environments/environments.prod.ts文件

export const environment = {
  production: true
};

正如我之前提到的，我尝试过在路径中添加和删除 /api 以及在 http 和 https 之间来回移动之类的操作，但它根本行不通。我可以从 localhost:3333 成功调用 product-index 控制器，所以我知道 Nest 中的一切都已正确设置，从错误中显示的路径来看，我似乎从我的 NGXS 状态正确定位了它。这里有什么问题？我错过了什么或者我应该看看吗？

Answer 1

在四处挖掘之后，我发现了一种在我们的应用程序中启用 cors 的替代方法，即将其应用于 main.ts 文件中 NestFactory 的 create() 函数，如下所示

const app = await NestFactory.create(AppModule, {cors: true});

这使错误消失了。我不知道为什么这个和 app.enableCors() 有区别。我正在使用 Angular 9.1，所以可能有一些东西阻止了 Nest 建立连接。

API 请求返回尝试从 Angular 前端访问 NestJS 后端的错误

API requests returning errors trying to access NestJS backend from Angular frontend

angular

typescript

nestjs

ngxs

nrwl-nx