Angular PWA 應用程序在調用 Node JS/Express API 時獲得 504（網關超時），但僅在從設備運行時

Question

錯誤

POST http://localhost:3000/api/user 504（網關超時）

錯誤服務器錯誤代碼：504 消息： http://localhost:3000/api/user 的Http 失敗響應：504 網關超時

描述

在設備上運行此代碼時出現 504（網關超時）錯誤。 如果在 4200 上使用“ng serve”運行，則 POST 請求有效。如果在 8080 上使用“http-server -p 8080 -c-1 dist/test504”運行並使用瀏覽器進行測試，則該請求也有效。 我只在使用 http-server 運行並使用 Chrome 通過 Android 設備進行測試時才會收到 504 錯誤（這樣我就可以檢查發生了什么）。 我想區別在於 Service Worker 正在代理調用，但這並不能幫助我弄清楚。 此外，直接使用 Postman 測試了 API，它工作正常。

需要注意的一件事是 504 錯誤發生在亞秒級。 它似乎沒有在等待任何東西。 它只是立即超時。

我創建了一個簡化的前端和后端，但仍然存在問題。

Angular app.compoment.ts

saveUser() 調用在 localhost:3000 上運行的 Node JS/Express API。

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

Answer 1

我想通了。 問題是我必須在 Chrome 開發遠程設備工具中添加一個額外的規則來端口轉發 localhost:3000，該網站正在使用該規則。 因為我沒有那個，所以在設備上運行時，它正在尋找設備上的 localhost:3000，而不是運行 localhost:3000 Node / Express 的桌面。