android - 在同一网络上的不同设备上预览 Angular 应用程序时,如何向 Node.js 服务器发出请求不会失败?
问题描述
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
网络标头:
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 服务器的请求失败。
解决方案
更新
app.listen(4000, 193.168.1.X, () => {
console.log('Back-end listening on port: 4000')
});
现在使用 IP 地址(192.168.1.X)而不是 localhost 从 Angular 调用 http 请求
推荐阅读
- javascript - 仅使用 url 识别图像/gif 大小
- angular - 按钮单击被调用而不在子组件中发出
- string - 如何将 String 或 str& 转换为 Vec
? - php - Laravel 6 错误 - Illuminate\Contracts\Container\BindingResolutionException 目标类不存在
- angular - 角度形式,setValue 后无法更改值
- wpf - 默认复制模板上的 MahApps Metro SplitButton 错误
- flutter - 装载时颤振重载功能
- php - 如何使用 PHP 更新/编辑 JSON
- php - 如何使用 WooCommerce 订阅插件启用货到付款方式
- python - 如何计算给定字符串中两个子字符串的出现而不在python中重叠?