Приложение Angular PWA получает 504 (время ожидания шлюза), вызывающее API-интерфейс Node JS / Express, но только при запуске с устройства - PullRequest
0 голосов
/ 12 января 2020

Ошибка

POST http://localhost: 3000 / API / пользователь 504 (время ожидания шлюза)

ОШИБКА Код ошибки сервера: 504 Сообщение : Http-сообщение об ошибке для http://localhost: 3000 / api / user : 504 Время ожидания шлюза

Описание

Я получаю 504 (шлюз Тайм-аут) ошибка при запуске этого кода на устройстве. Запрос POST работает, если выполняется с «ng serve» на 4200. Запрос также работает, если выполняется с «http-server -p 8080 - c -1 dist / test504» на 8080 и тестированием с помощью браузера. Я получаю ошибку 504 только при работе с http-сервером и тестировании через устройство Android, используя Chrome (поэтому я могу проверить, что происходит). Я полагаю, что разница в том, что сервисный работник передает вызов, но это не помогает мне разобраться. Кроме того, тестировал API напрямую с Postman, и он отлично работает.

Следует отметить, что ошибка 504 происходит за одну секунду. Не похоже, что он чего-то ждет. Он просто сразу истекает.

Я создал упрощенный фронт и бэкэнд, который все еще имеет проблему.

Angular app.compoment.ts

saveUser () вызывает API-интерфейс Node JS / Express, работающий на localhost: 3000.

import { Component } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Iuser } from './user';
import { catchError } from 'rxjs/operators';
import { throwError} from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  user: Iuser = {
    email: '',
    firstName: ''
  };
  result: any;

  constructor(private http: HttpClient) {}

  saveUser() {
    let nbr: number;
    let email: string;

    nbr = Math.floor(Math.random() * Math.floor(100));
    email = 'email' + nbr + '@gmail.com';
    this.user.email = email;
    this.user.firstName = 'test';
    console.log('user=', this.user);

    this.postUser(this.user)
    .pipe(
      catchError (this.handleError)
    )
    .subscribe(data => {
      console.log('result=', data);
      this.result =  JSON.stringify(data);
    });
  }

  private postUser(user: Iuser) {
    return this.http.post('http://localhost:3000/api/user', user);
  }

  private handleError(error) {
    let errorMessage = '';
    if (error.error instanceof ErrorEvent) {
        // client-side error
        errorMessage = `Client Error: ${error.error.message}`;
    } else {
        // server-side error
        errorMessage = `Server Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    return throwError(errorMessage);
  }
}

Узел JS / Express API

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const User = require('./models/user');

const app = express();

mongoose.connect(process.env.MONGO_CONNECT)
  .then(() => {
    console.log('Connected to database');
  })
  .catch(() => {
    console.log('Connection failed');
  });

app.use(bodyParser.json());

app.use((req,res, next) => {
  res.setHeader('Access-Control-Allow-Origin', process.env.CORS_ORIGIN);
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE, OPTIONS');
  next();
});


app.post('/api/user', (req, res,next) => {
  const user = new User({
    firstName: req.body.firstName,
    email: req.body.email
  });
  console.log(user);
  user.save();
  res.status(201).json({
    message: 'Post added successfully'
  });
});

module.exports = app;

Версии

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.22
@angular-devkit/build-angular     0.803.22
@angular-devkit/build-optimizer   0.803.22
@angular-devkit/build-webpack     0.803.22
@angular-devkit/core              8.3.22
@angular-devkit/schematics        8.3.22
@angular/cli                      8.3.22
@angular/pwa                      0.803.22
@ngtools/webpack                  8.3.22
@schematics/angular               8.3.22
@schematics/update                0.803.22
rxjs                              6.5.4
typescript                        3.5.1
webpack                           4.39.2

Node JS version is 12.13.1

1 Ответ

0 голосов
/ 27 января 2020

Я понял это. Проблема в том, что мне пришлось добавить дополнительное правило в Chrome dev для удаленных устройств в port-forward localhost: 3000, который использует веб-сайт. Поскольку у меня этого не было, при запуске на устройстве он искал localhost: 3000 для устройства, а не мой рабочий стол, на котором работал localhost: 3000 Node / Express.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...