CORS 以某种方式阻止我的 Angular 和 Nestjs 应用程序进行通信答案

【问题标题】：CORS is somehow stopping my Angular and Nestjs apps from communicatingCORS 以某种方式阻止我的 Angular 和 Nestjs 应用程序进行通信
【发布时间】：2020-07-10 11:15:45
【问题描述】：

我正在使用 NGXS 构建一个带有 Angular 和 NestJS 的应用程序来进行状态管理。我已完成所有设置并为我的应用程序提供服务，但在控制台中出现此错误。

从源“http://localhost:4200”访问“localhost:333/api/product-index”处的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-扩展名，https。

在做了一些研究后，我发现 this article 解释了如何在我们的 Angular 应用程序中处理 CORS，在检查了它告诉我们修改的文件后，我发现这些设置已经存在。我对它告诉我们更新的server.js 文件感到困惑，在查看了server.js 文件中通常所做的事情之后，我得出的结论是，在 Angular 中它必须是main.ts 文件但是我不知道是否我需要对我的 Nest 应用程序或我的 Angular 应用程序中的 main.ts 文件进行修改。我也在为我的应用程序使用nrwl nx monorepo。

这是来自我的 Angular 应用程序的 proxy.conf.json 文件

{
    "/cre8or-maker-backend": {
      "target": "http://localhost:3333",
      "secure": false,
      "logLevel": "debug"
    }
  }

这是我的angular.json 文件中architect 对象的serve 对象。

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

正如我之前所说，这些设置已经存在于这些文件中，对我来说唯一似乎是新的部分是关于修改 server.js 文件的部分，我假设它是 Angular 世界中的 main.ts 文件。这是我的main.ts 文件的样子

nest main.ts

import { NestFactory } from '@nestjs/core';

import { AppModule } from './app/app.module';

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 main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

我已经安装了cors npm 包，我只是不知道我还想做什么才能让它工作，有人可以帮忙吗？

更新我尝试将app.enableCors(); 添加到我的NestJs 应用程序中的main.ts 文件中，并将create(AppModule) 函数修改为create(AppModule, {cors: true})，但都没有解决问题。我还添加了以下 sn-p 代码，但也无济于事。

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
    next();
  });

到目前为止，我只定义了一种状态，向后端发出 API 请求。在我的状态中，我有一个看起来像这样的动作

@Action(GetProductIndexList)
    getProductIndexListData({patchState, dispatch, getState}: StateContext<ProductIndexListModel>){

       return this.dataService.fetchProductIndexList().pipe(tap((result)=>{
            const state = getState();

            patchState({items:[...state.items, ...result]});
        }));
    }

我在状态构造函数中调用dataService 的服务文件中进行api 调用。服务文件如下所示。

@Injectable({ providedIn: 'root' })

export class ProductIndexService{

    constructor(private httpClient: HttpClient){}

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

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

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

在 NestJS 中，我可以成功调用数据而不会出现任何错误，因此我知道控制器设置正确，但如果有人想看看我是如何在那里设置的，请告诉我，我会用代码更新这个问题。

【问题讨论】：

这能回答你的问题吗？ NestJS enable cors in production
不幸的是，这没有帮助。我从中尝试了几件事，我修改了我的问题以显示。
您能告诉我们您在 Angular 应用程序中发送请求的位置吗？
我刚刚又更新了问题。
尝试对您的 URL 进行以下更改：private readonly URL: string = 'https://localhost:3333/api';

标签： angular typescript nestjs ngxs

【解决方案1】：

我从错误中意识到我在向后端发送请求的服务文件中向localhost:333 而不是localhost:3333 发出请求。这使得 CORS 错误消失了，但我仍然有其他错误，我开始了一个新问题来解决。

【讨论】：