CORS каким-то образом мешает моим Angular и Nest js приложениям общаться - PullRequest
Новая
       140

CORS каким-то образом мешает моим Angular и Nest js приложениям общаться

0 голосов
/ 30 марта 2020

Я создаю приложение с Angular и Nest JS, используя NGXS для управления состоянием. Я настроил все, обслужил свое приложение и получил эту ошибку в консоли.

Доступ к XMLHttpRequest по адресу "localhost: 333 / api / product-index" из источника "http://localhost : 4200 'было заблокировано политикой CORS: Запросы между источниками поддерживаются только для схем протоколов: http, data, chrome, chrome -extension, https.

После выполнения небольшое исследование, которое я обнаружил в этой статье , объясняющее, как обрабатывать CORS в наших Angular приложениях, и после проверки файлов, которые он говорит нам изменить, я увидел, что настройки уже присутствовали. Я был озадачен файлом 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"
          }

Как я уже говорил, эти настройки уже присутствовали в этих файлах, и единственное, что мне кажется новым, - это часть об изменении * Файл 1029 *, который я предполагаю, является файлом 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 в моем приложении Nest Js, а также изменение функции 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]});
        }));
    }

Я выполняю вызов 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[]>;
    }
}

В Nest JS я могу успешно вызывать данные без каких-либо ошибок, поэтому я знаю, что контроллеры настроены правильно, но если кто-то захочет посмотреть, как у меня настроены вещи там, дайте мне знать, и я обновлю этот вопрос с кодом.

1 Ответ

0 голосов
/ 01 апреля 2020

Я понял из ошибки, что я делал запрос к localhost:333 вместо localhost:3333 в служебном файле, отправляющем запросы бэкэнду. Это привело к ошибке CORS go, но у меня все еще есть другие ошибки, с которыми я начал новый вопрос.

...