Не могу получить JSON-запрос от моего локального сервера в Ionic 4 - PullRequest
Новая
       5

Не могу получить JSON-запрос от моего локального сервера в Ionic 4

0 голосов
/ 19 марта 2019

Я пытаюсь получить JSON с моего локального php-сервера в приложение ionic 4. Сначала я обнаружил, что мне нужно использовать команду «ionic cordova emulate browser» вместо команды «ionic serve», чтобы заставить HTTP работать, так как требуется cordova. После этого я смог получить пример JSON с веб-сайта jsonplaceholder, но все еще не могу получить доступ к своему локальному серверу. Я перепробовал все возможные комбинации URL для моего локального сервера, и я понятия не имею, что делать дальше. Коды:

tab1.module.ts 

import { Component } from '@angular/core';
import { HTTP } from '@ionic-native/http/ngx';
import { Tab1Service } from '../api/tab1/tab1.service'

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  //v: requests from my local server
  v1: any;
  v2: any;
  v3: any;
  v4: any;
  v5: any;

  //a: requests from other server
  a1: any;
  a2: any;

  constructor(public http: HTTP, public tab1Service:Tab1Service) {

    //My server
    //With HTTP -------------
    //Set v1
    this.http.get('http://192.168.0.21/WebServer/Ionic/process.php', {}, {})
    .then(res => {
      this.v1 = res.data;
      }
    )
    .catch(err => 
      this.v1 =  err
    );

    //Set v2
    this.http.get('192.168.0.21/WebServer/Ionic/process.php', {}, {})
    .then(res => {
      this.v2 = res.data;
      }
    )
    .catch(err => 
      this.v2 =  err
    );

    //Set v3
    this.http.get('http://localhost/WebServer/Ionic/process.php', {}, {})
    .then(res => {
      this.v3 = res.data;
      }
    )
    .catch(err => 
      this.v3 =  err
    );

    //Set v4
    this.http.get('localhost/WebServer/Ionic/process.php', {}, {})
    .then(res => {
      this.v4 = res.data;
      }
    )
    .catch(err => 
      this.v4 =  err
    );

    //With HttpClient ---------------
    //Set v5
    this.tab1Service.getConfig()
    .subscribe((data) => this.v5 = data['dados']);

    //Other server
    //With HTTP -------------
    //Set a1
    this.http.get('https://jsonplaceholder.typicode.com/todos/1', {}, {})
    .then(res => {
      this.a1 = res.data;
      }
    )
    .catch(err => 
      this.a1 =  err
    );

    //With HttpClient ---------------
    //Set a2
    this.tab1Service.getConfig2()
    .subscribe((data) => this.a2 = data['title']);
  }
}

PS: Все комбинации URL работают в браузере

tab1.service.ts 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class Tab1Service {

  constructor(private http: HttpClient) {}

  getConfig() {
    return this.http.get('http://192.168.0.21/WebServer/Ionic/process.php');
  }

  getConfig2() {
    return this.http.get('https://jsonplaceholder.typicode.com/todos/1');
  }
}

process.php 

<?php 
$result = "{ \"success\": true, \"dados\": \"teste\" }";              

//Echo $result and set headers
echo $result;
header("Access-Control-Allow-Credentials: true");
header("Content-Type: application/json; charset=utf-8");

PS: У меня такая же проблема с этими заголовками и без них

Печать:

Версия:

  • PHP 7 с Apache Lounge
  • Ионные 4.10.3
  • Кордова 8.1.2

Все, что я делал, было основано на интернет-уроках, так как я довольно плохо знаком с ionic и php.

РЕДАКТИРОВАТЬ 1

Информация об изображениях в виде текста:

  • Вкладка «Выход на одну страницу» (Vs {{v1}}, {{v2}}, {{v3}}, {{v4}}, {{v5}} | Как { {a1}}, {{a2}})

    Vs [Объект Object], [Объект Object], [Объект Object], [объект Объект], |

    Как {"userId": 1, "id": 1, "title": "delectus aut autem", "complete": ложный }, delectus aut autem

  • JSON с обоих серверов

    Мой сервер

    {"success": true, "dados": "teste"}

    jsonplaceholder

    { "userId": 1, "id": 1, "title": "delectus aut autem", "завершено": ложь }

  • Заголовки ответов от обоих серверов

    Мой сервер

    Access-Control-Allow-Credentials: true Подключение: Keep-Alive Длина контента: 37 Тип контента: приложение / JSON; кодировка = UTF-8 Дата: вторник, 19 марта 2019 14:55:59 GMT Keep-Alive: тайм-аут = 5, максимум = 100 Сервер: Apache / 2.4.38 (Win64) PHP / 7.3.3 X-Powered-By: PHP / 7.3.3

    jsonplaceholder

    Access-Control-Allow-Credentials: true Cache-Control: общедоступный, max-age = 14400 CF-Cache-Status: HIT CF-RAY: 4ba06d22bfc3ba18-ATL Подключение: keep-alive Дата: вторник, 19 марта 2019 15:19:43 GMT Этаж: W / "53-hfEnumeNh6YirfjyjaujcOPPT + s" Expect-CT: максимальный возраст = 604800, report-uri = "https://report -uri.cloudflare.com / cdn- CGI / маяк / ожидать-кар» Истекает: вторник, 19 марта 2019 г. 19:19:43 GMT Прагма: без кеша Сервер: cloudflare Варьируется: Происхождение, Accept-Encoding Через: 1.1 Вегур X-Content-Type-Options: nosniff X-Powered-By: Экспресс

  • Ошибка консоли

    ОШИБКА {…} ошибка: пузыри ошибок: ложь cancelBubble: ложь отменяемый: ложь составлено: (...) сообщение: «Http ошибка ответа для http://192.168.0.21/WebServer/Ionic/process.php: 0 Неизвестная ошибка "имя: «HttpErrorResponse» нормально: ложное состояние: 0 statusText: «Неизвестная ошибка» url: «http://192.168.0.21/WebServer/Ionic/process.php"​

РЕДАКТИРОВАТЬ 2

Ребята, я обнаружил, что не так с моей просьбой. Заголовок Access-Control-Allow-Origin отсутствовал. Итак, когда я добавил: 

header("Access-Control-Allow-Origin: *");

в конце process.php , все заработало.

РЕДАКТИРОВАТЬ 3

ВАЖНО: Я будуМы только что узнали, что, добавив этот заголовок, вы фактически подвергаете свой сервер риску, так как он становится более уязвимым для CSRF-атак и других подобных атак.Таким образом, правильное решение - добавить конкретные источники, необходимые для доступа к серверу, а не использовать * в качестве значения для заголовка Access-Control-Allow-Origin.

...