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

我正在用Angular和NestJS构建一个应用程序，使用NGXS进行状态管理。我把所有的东西都设置好了，为我的应用程序提供了服务，并在控制台中得到了这个错误

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

在做了一些研究后，我发现解释了如何在Angular应用程序中处理CORS，在检查了它告诉我们要修改的文件后，我发现设置已经存在。我对它告诉我们要更新的

server.js

文件感到困惑，在研究了

server.js

文件中的典型操作后，我得出结论，在Angular中，它必须是

main.ts

文件，但我不知道是否需要在我的Nest应用程序中修改

main.ts

文件在我的Angular应用程序中。我的应用程序也使用了

nrlnx

monorepo

这是我的angular应用程序中的

proxy.conf.json

文件

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

这是我的

angular.json

文件中

architect

对象的

service

对象

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

正如我之前所说，这些设置已经存在于这些文件中，对我来说唯一新的事情是关于修改

server.js

文件的部分，我假设它是Angular world中的

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();

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));

angular 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();

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（）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]});
        }));
    }

---

在NestJS中，我可以在没有任何错误的情况下成功调用数据，因此我知道控制器已正确设置，但如果有人想了解我在那里的设置情况，请告诉我，我将用代码更新此问题。

我从错误中意识到我向

localhost:333而不是将请求发送到后端的服务文件中的
localhost:3333
。这使得CORS错误消失了，但我仍然有其他错误，我开始了一个新的问题来解决。
这是否回答了您的问题？不幸的是，这没有帮助。我从中尝试了几件事，我修改了我的问题以显示。您能告诉我们您在angular应用程序中发送请求的位置吗？我刚刚再次更新了该问题。请尝试对您的URL进行以下更改：
private readonly URL:string=https://localhost:3333/api';