angular - 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文件，但我不知道是否需要修改 main.ts文件中的 Nest 应用程序或我的 Angular 应用程序中的文件。我正在使用 nrwl nx monorepo 也适用于我的应用程序。

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

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

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

"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();到 main.ts我的 NestJs 应用程序中的文件以及修改 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

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

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

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

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

@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 中，我可以成功调用数据而没有任何错误，所以我知道 Controller 设置正确，但如果有人想看看我在那里设置的东西，请告诉我，我会用代码更新这个问题。

Answer 1

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