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

Posted 2023-02-19

【中文标题】CORS 以某种方式阻止我的 Angular 和 Nestjs 应用程序进行通信

【英文标题】：CORS is somehow stopping my Angular and Nestjs apps from communicating

【发布时间】：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';

【参考方案1】：

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