android - 在同一网络上的不同设备上预览 Angular 应用程序时，如何向 Node.js 服务器发出请求不会失败？

Question

Angular 前端托管在端口 4200 上。Express.js 后端托管在端口 4000 上。两者都托管在我的台式计算机上。

现在我在我的 Android 手机上导航到 192.168.1.X:4200 以查看 Angular 应用程序。 Angular 应用加载并运行，但没有从 Express.js 服务器加载数据。在我的台式电脑上，对 Express.js 服务器的请求工作正常，浏览器中的 Angular 应用程序显示正确的数据。在两个设备的浏览器上访问 192.168.1.X:4000(数据的 API)返回预期的 JSON。

我通过 USB 将手机连接到台式电脑进行调试。这是 Chrome DevTools 控制台中的错误:

GET http://localhost:4000/net::ERR_CONNECTION_REFUSED

和

ERROR 
  HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:4000/", ok: false, …}
    error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
    headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
    message: "Http failure response for http://localhost:4000/: 0 Unknown Error"
    name: "HttpErrorResponse"
    ok: false
    status: 0
    statusText: "Unknown Error"
    url: "http://localhost:4000/"
    __proto__: HttpResponseBase

Chrome DevTools 中的网络选项卡...

网络:

Name: localhost
Status: (failed)
Type: xhr
Initiator: zone-evergreen.js:2952

网络 header :

General
  Request URL: http://localhost:4000/
  Referrer Policy: no-referrer-when-downgrade
Request Headers
  Provisional headers are shown
  Accept: application/json, text/plain, */*
  Origin: http://192.168.1.2:4200
  Referer: http://192.168.1.2:4200/
  Save-Data: on
  Sec-Fetch-Mode: cors
  User-Agent: Mozilla/5.0 (Linux; Android 9; SM-G965W) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.92 Mobile Safari/537.36

Express.js 代码:

const express = require('express'),
      cors = require('cors');

const app = new express();

app.use(cors());

app.get('/', async (req, res) => {
  res.json({data: "a lot of data"});
});


app.listen(4000, () => {
  console.log('Back-end listening on port: 4000')
});

因此，当通过我的手机而不是通过我的台式计算机访问 Angular 应用程序时，对 Express.js 服务器的请求失败。

Answer 1

看起来当您从 Angular 代码向 Express 服务器发出请求时，您正在使用 localhost 作为 ip 地址。这将在您的 PC 上运行，因为 Express.js 应用程序在您的本地 PC 上提供。但是当 Angular 应用程序在移动设备上运行时，它将无法访问您的快速服务器。您可以做的是，不要向 localhost 发出请求，而是使用 IP 地址 192.168.1.X:4000。这样即使在移动浏览器上查看 Angular ，请求也会到达 express 服务器。
希望对您有所帮助!