Node.js Angular PWA应用程序获得504（网关超时）调用节点JS/Express API，但仅当从设备运行时

错误

POST 504（网关超时）

错误服务器错误代码：504消息：Http失败响应：504网关超时

说明

在设备上运行此代码时，我遇到504（网关超时）错误。如果在4200上运行“ng serve”，POST请求将起作用。如果在8080上使用“http服务器-p 8080-c-1 dist/test504”运行并使用浏览器进行测试，则该请求也可以工作。我只有在使用http服务器运行并通过Android设备使用Chrome进行测试时才会出现504错误（因此我可以检查正在发生的事情）。我想区别在于服务人员正在代理呼叫，但这并不能帮助我解决问题。此外，直接与Postman测试API，效果良好

需要注意的一点是，504错误发生在亚秒级。它似乎没有在等待什么。它只是立即超时

我已经创建了一个简化的前端和后端，但仍然存在这个问题

角度应用组件.ts

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

saveUser（）调用在localhost:3000上运行的节点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

---

我明白了。问题是，我必须在Chrome dev remote devices tools中添加一条额外的规则，以转发网站正在使用的localhost:3000。因为我没有，在设备上运行时，它在设备上寻找localhost:3000，而不是运行localhost:3000 Node/Express的桌面。

你能用启动服务器的代码更新吗？rpereira15，这都是在开发环境中我的机器上，所以我启动服务器。当我使用浏览器而不是设备从我的机器上运行它时，代码会一直传到API和database.Correction。当我使用http服务器和端口8080时，无论是在浏览器中还是通过Chrome开发工具从设备中使用服务工作者。我查看了服务人员代码来比较设备和浏览器，没有发现任何区别。这两个请求看起来相同，并且调用同一个本地服务器（localhost:3000），但设备似乎无法访问localhost:3000。任何帮助或想法都将不胜感激。