Сервисный работник Angular предотвращает вызов API - PullRequest
Новая
       18

Сервисный работник Angular предотвращает вызов API

0 голосов
/ 06 апреля 2019

У меня есть приложение Angular, которое использует конечные точки API приложения NestJS.

Чтобы развернуть все приложение в Heroku, я создаю приложение Angular и помещаю содержимое папки / dist в мое приложение NestJS..

Я использую систему аутентификации Google.По сути, Angular вызывает конечную точку API, которая перенаправляет пользователя на экран входа в систему Google, и после этого он вызывает мой API, который перенаправляет обратно на первый URL-адрес, как показано на этом изображении: auth process

Моя проблема с этим : когда в моем приложении Angular работает сервисный работник, каждый раз, когда я нажимаю ссылку «Войти в Google», я получаю следующее сообщение об ошибке:

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут.Сегмент URL: «api / auth / google» Ошибка: невозможно сопоставить ни один маршрут.Сегмент URL: 'api / auth / google'

После этого, когда я пытаюсь вызвать конечную точку API напрямую через мой браузер, например https://myapp.herokuapp.com/api/albums, я получаю то же сообщение об ошибке. Но не с почтальоном , например.

Итак, Я решил удалить работника сервиса из угловой части, и теперь все работает хорошо .Таким образом, работник сервиса не позволяет мне вызывать конечные точки API.

Как правильно настроить его, чтобы избежать подобных проблем?

Если вам нужна дополнительная информация, см. Ниже:

Вот мой main.ts: 

async function bootstrap() {
  const configService = new ConfigService(CONFIG_SERVICE_PATH);
  const app = await NestFactory.create(AppModule);
  const httpRef = app.get(HTTP_SERVER_REF);

  app.enableCors();

  console.log('***** NODE ENV IS: ' + process.env.NODE_ENV); // <-- returns 'production' 
  console.log('***** IS PRODUCTION ? ' + configService.get('PRODUCTION')); // <-- returns 'true'

  if (configService.get('PRODUCTION') === 'true') {
    app.useStaticAssets(join(__dirname, '../front')); // <-- Angular folder
    app.useGlobalFilters(new AllExceptionsFilter(httpRef));
  } else {
    app.useStaticAssets(join(__dirname, '..', 'public'));
  }

  await app.listen(process.env.PORT || configService.get('PORT'));
}

Мой AllExceptionsFilter: 

@Catch(NotFoundException)
export class AllExceptionsFilter extends BaseExceptionFilter {
  constructor(@Inject(HTTP_SERVER_REF) applicationRef: HttpServer) {
    super(applicationRef);
  }

  /**
   * This filter will serve the correct response for a request to the API or a request to the front part.
   */
  catch(exception: any, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse();
    const req = ctx.getRequest();

    if (req.path && req.path.startsWith('/api')) {
      super.catch(exception, host);
    } else {
      response.sendFile(resolve(__dirname, '../../front/index.html'));
    }
  }
}

Мой LoginComponent (угловой): 

<a href="{{ loginUrl }}" class="google-button">
  <span class="google-button__text">Sign in with Google</span>


get loginUrl(): string {
  const url = environment.backendUrl + '/auth/google';
  console.log('Login url: ' + url); // <-- logs 'https://myapp.heroku.com/api/auth/google'
  return url;
}

1 Ответ

0 голосов
/ 15 апреля 2019

@ Flobesst, опубликовано как ответ:)

Взгляните на этот пост: Angular 5 и Service Worker: Как исключить определенный путь из ngsw-config.json

...