Хостинг Ionic 3 & expressJS RestAPI на том же Docker-сервере

Question

Я пытаюсь разместить на сервере приложение ionic 3. Приложение корректно работает на iOS, Android и на localhost (ionic serve), но оно не работает после размещения, и я схожу с ума, чтобы решить проблему, потому что ошибок нет!

Сервер - это капля Digital Ocean. На нем я смонтировал Docker-compose среду, потому что мне нужно поместить несколько RestAPI + frontend на одну и ту же машину.

Прямо сейчас на docker-compose есть следующие соответствующие сервисы (+ другие, бесполезные для проблемы):

• Nginx прокси для стека ELK: заботьтесь только о конкретном порту и запрашивайте имя пользователя и пароль перед перенаправлением на Kibana [РАБОТАЕТ, как и ожидалось] ;
• Автоматический обратный прокси-сервер Nginx для новых контейнеров: каждый новый (внешний интерфейс) контейнер будет проксироваться за поддоменом [РАБОТАЕТ, как и ожидалось] ;
• ExpressJS RestAPI (без прокси): уже позаботился о CORS и других незначительных проблемах [РАБОТАЕТ, как и ожидалось] ;
• Ионный интерфейсный контейнер: проблемный !

Проблема заключается в том, что ионный контейнер не может получить все заголовки запроса API. Во время запроса login сервер отправляет мне обратно Authorization и refreshToken header, и они мне нужны для дальнейшего запроса!

Я приложу несколько изображений, чтобы лучше объяснить, что я имею в виду:

ОЖИДАЕМЫЕ ПОВЕДЕНИЯ (происходит на локальном хосте)

XHR POST из хрома

Console Log от Ionic

СТРАННОЕ ПОВЕДЕНИЕ (происходит на размещенном ионике)

XHR (запрос преамбулы)

XHR POST из хрома

Журнал консоли от hosted-Ionic

Почему журнал консоли от hosted-ionic не получает / не показывает заголовки, которые мне нужны?

ИОННЫЙ КОД запроса (функция -> запросить)

• login.ts

  local_login(){
      console.log('dati inviati = user: ',this.user);
  
      this.req.local_login(this.user).then(data => {
        this.spinnerDialog.hide();
        if(data['status'] == 200){
          console.log('Ok => HomePage')
          this.goToPage("HomePage")
        }
        else {
          console.log('Login fallito => LoginPage')
          this.goToPage("LoginPage")
        }
      });
  
    }
  

• request.ts

  local_login(body) {
      return new Promise(resolve => {
          let headers = new Headers();
          headers.append('Content-Type', 'application/json');
          headers.append('Authorization', this.commonVar.jwt);// EMPTY var
          headers.append('refreshToken', this.commonVar.rjwt);// EMPTY var
          this.http.post(this.site+':'+this.port+'/api/'+this._v+'/auth/local/login', body, {headers: headers})
          .subscribe((data) => {
            console.log('data >>>',data);
  
            data['_body'] = JSON.parse(data['_body']);
            if(data['status'] === 200){
              this.commonVar.jwt = data.headers.get('Authorization');
              console.log('Local >>>',data.headers.get('Authorization'))
              console.log('Storage >>>',this.commonVar.jwt)
  
              this.commonVar.rjwt = data.headers.get('refreshToken');
              console.log('Local >>>',data.headers.get('refreshToken'))
              console.log('Storage >>>',this.commonVar.rjwt)
  
              this.commonVar.user = JSON.stringify(data['_body']['data']);
              console.log('USER by Login =>',this.commonVar.user);
              console.log('login OK');
            }
            else {
              //TODO: handling error login
            }
            resolve(data);
          },error => {
            //TODO: handling error login
            console.error(error);
          });
      });
    }
  

Как видите, консольный журнал data (ответ) завершен только на локальном хосте. Но из Chrome XHR я вижу все заголовки. также не работает консольный журнал одного заголовка (ноль).

Похоже, код не ждет до входа в консоль, но это невозможно. Я попробовал также форму обещания модуля http без удачи.

Может быть, проблема связана с Docker?

Я устал выполнять контейнер Ionic следующим образом:

• обслуживает папку www через выделенный или совместно используемый экземпляр nginx.
• обслуживает платформу / браузер / www так же, как указано выше.
• выполнение ионной подачи с различными комбинациями флагов.

все эти способы воспроизводят одну и ту же проблему.

Изначально я использовал localStorage через indexedDB, и я подумал, что это проблема. Поэтому я также попытался удалить его (как вы можете видеть сейчас, я использую общие переменные), но проблема все еще существует.

Если я что-то забыл, спросите ...

Спасибо, кто может указать мне правильное направление!

Answer 1

Благодаря этому ответу меня указали в правильном направлении.

Проблема не была ионной сама по себе, а касалась конфигурации CORS сервера Rest.Я настроил все необходимое для заголовков для входящего соединения, но забыл настроить его для исходящих.

На всякий случай, если у кого-то возникнет такая же проблема:

Это была моя предыдущая конфигурацияна ExpressJS о CORS:

const express = require('express');
var app = express();

[...]

var allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization,refreshToken');
  next();
};

[...]

app.use(allowCrossDomain);

И после исправления:

const express = require('express');
var app = express();

[...]

var allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization,refreshToken');
  res.header('Access-Control-Expose-Headers', 'Content-Type,Authorization,refreshToken');
  /* ^^^ This was the needed line! ^^^         ^^^ here you put your custom headers ^^^ */
  next();
};

[...]

app.use(allowCrossDomain);

Надеюсь, это может помочь кому-то еще