API-запросы, возвращающие ошибки при попытке доступа к Nest JS backend из Angular frontend - PullRequest
Новая
       35

API-запросы, возвращающие ошибки при попытке доступа к Nest JS backend из Angular frontend

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

При вызове API для моего приложения Nest JS я получаю следующие ошибки.

core. js: 6185 ОШИБКА HttpErrorResponse {заголовки: HttpHeaders, статус: 0, statusText: «Неизвестная ошибка», URL: «https://localhost: 3333 / api / product-index », ok: false,…}

и

GET https://localhost: 3333 / api / product-index net :: ERR_SSL_PROTOCOL_ERROR

Из рассмотрения Nest, Angular и NGXS индивидуально и предложенные способы go о вещах у меня все настроено правильно. Единственное, что я мог подумать, - это поработать со ссылками на localhost:3333/api, чтобы узнать, возможно, я нацеливаюсь на местоположение, которого нет. Я заметил, что когда я изменяю https на http, я получаю ошибку CORS, которая не исчезает go, даже если включить enableCors() в файл main.ts. Я посмотрел и прочитал несколько учебных пособий, соединяющих Nest JS с Angular, и как только они настроили файлы, он просто работает. Я просматривал руководство на сайте nrwl, и, насколько я вижу, все настроено правильно.

Вот как выглядит файл main.ts в моем приложении Nest 

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

данные serve для моего проекта веб-интерфейса в файле angular.json выглядят следующим образом 

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

файл proxy.conf.json в моем проекте веб-интерфейса выглядит следующим образом 

{
    "/api": {
      "target": "https://localhost:3333",
      "secure": false,
      "logLevel": "debug"
    }
}

У меня есть служебный файл в моем модуле NGXS, который отправляет запрос на контроллер product-index в приложении Nest, который выглядит следующим образом: 

export class ProductIndexService{

    constructor(private httpClient: HttpClient){}

    private readonly URL: string = 'https://localhost:3333/api';




    public fetchProductIndexList():Observable<CattegoryIndexItem[]>{
        const path: string = this.URL + '/product-index';

        return this.httpClient.get(path) as Observable<CattegoryIndexItem[]>;
    }
}

Мой environments/environments.ts файл 

export const environment = {
  production: false,
  apiUrl: '/api'
};

Мой environments/environments.prod.ts файл 

export const environment = {
  production: true
};

Как я уже упоминал ранее, я пытался добавить такие вещи, как добавление и удаление /api из пути и переходить туда-сюда между http и https, и это просто победило ' т работа. Я могу успешно вызвать контроллер product-index из localhost:3333, поэтому я знаю, что в Nest все настроено правильно, по путям, показанным в ошибке, похоже, что я нацеливаю его правильно из своего состояния NGXS. В чем здесь проблема? Чего мне не хватает или еще мне посмотреть?

1 Ответ

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

После копания я наткнулся на альтернативный метод включения cors в нашем приложении, который заключается в применении его к функции create() NestFactory в файле main.ts, например: 

const app = await NestFactory.create(AppModule, {cors: true});

Это сделало ошибки go прочь. Я не знаю, почему есть разница между этим и app.enableCors(). Я использую Angular 9.1, так что, возможно, что-то под капотом мешает Nest установить соединение.

...