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

Question

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

Access to XMLHttpRequest at 'localhost:333/api/product-index' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

在做了一些研究后，我发现 this article 解释了如何在我们的 Angular 应用程序中处理 CORS，并且在检查文件后它告诉我们修改我看到设置已经存在。我对它告诉我们要更新的 server.js 文件感到困惑，在查看 server.js 文件中通常所做的事情后，我得出结论，在 Angular 中它必须是 main.ts 文件，但是我不知道是否需要修改 Nest 应用程序中的 main.ts 文件或 Angular 应用程序中的文件。我也在为我的应用程序使用 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 文件的部分，我假设是 main.ts Angular 世界中的文件。这是我的 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})，但都没有解决问题。我还添加了以下代码片段，但也没有帮助。

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 中，我可以成功调用数据而没有任何错误，所以我知道控制器设置正确，但如果有人想看看我是如何设置的，请告诉我，我会用代码。

Answer 1

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

Answer 2

对于以下内容，我只是运行在 NX 工作区中处理 Angular 13 和 Nest.js 8 应用程序时遇到了这个问题。

就我而言，我最终通过添加行 app.enableCors(); 解决了这个 CORS 问题；在 Nest.js 应用程序的 main.ts 文件中。

async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    const globalPrefix = 'api';
    app.setGlobalPrefix(globalPrefix);
    app.enableCors();
    const port = process.env.PORT || 3000;
    await app.listen(port);
    Logger.log(
        ` Application is running on: http://localhost:${port}/${globalPrefix}`
    );
}

查看文档：https://docs.nestjs.com/security/cors

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

CORS is somehow stopping my Angular and Nestjs apps from communicating

typescript

angular

nestjs

ngxs