Как сделать так, чтобы запрос к серверу Node.js не сбился при предварительном просмотре приложения Angular на другом устройстве в той же сети? - PullRequest
Новая
       32

Как сделать так, чтобы запрос к серверу Node.js не сбился при предварительном просмотре приложения Angular на другом устройстве в той же сети?

2 голосов
/ 26 сентября 2019

Angular front-end размещен на порте 4200. Back-end 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')
});

Итак, запрос к серверу Express.js не выполняется при доступе кУгловое приложение через телефон, но не через настольный компьютер.

Ответы [ 2 ]

0 голосов
/ 26 сентября 2019

Обновление

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

Теперь вызывайте http-запрос из angular, используя IP-адрес (192.168.1.X) вместо localhost

0 голосов
/ 26 сентября 2019

Похоже, что когда вы делаете запросы из Angular-кода на сервер Express, вы используете localhost в качестве IP-адреса.Это будет работать на вашем ПК, так как приложение Express.js обслуживается на вашем локальном ПК.Но когда приложение angular запускается на мобильном устройстве, оно не сможет получить доступ к вашему экспресс-серверу.Что вы можете сделать, это вместо того, чтобы делать запросы к localhost, используйте IP-адрес 192.168.1.X:4000.Таким образом, даже при просмотре angular в мобильном браузере запрос будет доставлен на экспресс-сервер.
Надеюсь, это поможет!

...