Проблемы локального CORS с приложением Ionic 4 на мобильном устройстве, использующим Laravel в качестве REST API - PullRequest
0 голосов
/ 11 июня 2019

Я уже пробовал любые решения, размещенные во всемирной паутине.

  1. Простое воспроизведение, создание нового приложения Laravel и настройка API-маршрута для получения get / postЗапросы.

  2. Создайте приложение Ionic и отправьте запрос на получение / публикацию API.

  3. Попробуйте в браузере, установите CORS какпосле этого браузер будет работать.

  4. Попробуйте на мобильном устройстве (ios, android), даже после настройки CORS он не будет работать.

    I 'Мы создали новое приложение Laravel с маршрутом api get / post, а также свежим ионным приложением, которое использует HttpClient angular, а также пыталось использовать плагин NativeHttp Cordova.Теперь простой запрос get работает без проблем в браузере (ionic serve).Если я пытаюсь отправить запрос get / post на мобильное устройство, я получаю «сообщение»: «Http error response для http://127.0.0.1:8000/api/login: 0 Unknown Error» с ошибкой HTTPClient Angular and Native Call: {"status": -1, «ошибка»: «Не удалось подключиться к серверу.»} С помощью плагина NativeHTTP.

Я попытался установить CORS в Laravel API, я использовал barryvdh / laravel-Cors, я попытался сделать свое собственное промежуточное программное обеспечение CORS, я также попробовал другой пакет Cors laravel.Со стороны Laravel ничего не помогло.

Тогда я попробовал несколько кодов и ионных приложений, чтобы решить эту проблему.В комплекте с заголовками, без простых запросов, NativeHTTP cordova-plugin-advanced-http, Angular HTTP ... ничего не работает ...

Этот пример из Ionic Doc не работает ...

    import { HTTP } from '@ionic-native/http/ngx';

    constructor(private http: HTTP) {}

    ...

    this.http.get('http://ionic.io', {}, {})
      .then(data => {

        console.log(data.status);
        console.log(data.data); // data received by server
        console.log(data.headers);

      })
      .catch(error => {

        console.log(error.status);
        console.log(error.error); // error message as string
        console.log(error.headers);

      });

Я получаю «message»: «Http error response для (unknown url): -1 undefined», в Браузере с HTTPClient of Angular работает хорошо.

Это также работает в Браузере:

    login(email: String, password: String) {

        return this.http.post('https://127.0.0.1:8000/api/login',
          {email: email, password: password}
        ).pipe(
          tap(api_token => {
            this.storage.setItem('api_token', api_token)
            .then(
              () => {
                console.log('Token Stored');
              },
              error => console.error('Error storing item', error)
            );
            this.api_token = api_token;
            this.isLoggedIn = true;
            return api_token;
          }),
        );
      }

В IOS и Android я получаю:

«message»: «Http-ошибка при http://127.0.0.1:8000/api/login: 0 Неизвестная ошибка»

Я пыталсячтобы использовать Ionic с и без Capacitor, я попробовал его с помощью ионного запуска --devapp, а также с ионным запуском cordova ios, с XCODE и т. д.просто не работает с Httprequests ...

Я выполнил шаги установки Cors пакета barryvdh, и файл cors.php выглядит так:

    'supportsCredentials' => false,
        'allowedOrigins' => ['*'],
        'allowedOriginsPatterns' => [],
        'allowedHeaders' => ['*'],
        'allowedMethods' => ['*'],
        'exposedHeaders' => [],
        'maxAge' => 0,

также сделал шаг $ middleware, чтобы сделатьон глобальный и использовал команду терминала php artisan vendor: publish - provider = "Barryvdh \ Cors \ ServiceProvider".

Браузер не работает без настроенного CORS, но когда я устанавливаю пакет, Браузер работает хорошо.Ничего не меняется с нативными приложениями, они все равно не будут работать после установки пакета CORS ...

полные ошибки:

    "headers": {
    [ng]     "normalizedNames": {},
    [ng]     "lazyUpdate": null,
    [ng]     "headers": {}
    [ng]   },
    [ng]   "status": 0,
    [ng]   "statusText": "Unknown Error",
    [ng]   "url": "http://127.0.0.1:8000/api/login",
    [ng]   "ok": false,
    [ng]   "name": "HttpErrorResponse",
    [ng]   "message": "Http failure response for         http://127.0.0.1:8000/api/login: 0 Unknown Error",
    [ng]   "error": {
    [ng]     "isTrusted": true
    [ng]   }
    [ng] }


    [console.log]: "Ionic Native: deviceready event fired after 374 ms"
    [ng] [console.log]: {
    [ng]   "headers": {
    [ng]     "normalizedNames": {},
    [ng]     "lazyUpdate": null,
    [ng]     "headers": {}
    [ng]   },
    [ng]   "status": -1,
    [ng]   "statusText": "Unknown Error",
    [ng]   "url": null,
    [ng]   "ok": false,
    [ng]   "name": "HttpErrorResponse",
    [ng]   "message": "Http failure response for (unknown url): -1         undefined",
    [ng]   "error": "Verbindung zum Server konnte nicht hergestellt werden."
    [ng] }

Я знаю, что опубликовал много информации, но, возможно,недостаточно.Надеюсь, вы понимаете мою проблему, и, возможно, у кого-то такая же проблема с Laravel API и Ionic mobile APP.

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

решил проблему ...

Я не размещал API, просто запустил его с помощью php artisan serve с адресом localhost: 8000.

Мои мобильные устройства не могут подключиться к локальному mac-адресу, в противном случае эмулятор на Mac может подключиться к этому адресу.

Поэтому мобильное устройство ответило: «message»: «Http-сбой для (неизвестный URL): -1.

Не знаю, как произошла неизвестная ошибка 0, сейчас попробую с хостадрессом.

В любом случае, спасибо.

0 голосов
/ 11 июня 2019

Вам нужно добавить заголовки в соответствии с типом ответа:

this.http.post('https://127.0.0.1:8000/api/login', {email: email, password: password}, { headers: { 'content-type': 'application/json' } })
...