Question

我正在尝试从本地php服务器获取JSON到ionic 4应用程序。首先，我发现我必须使用“离子科尔多瓦模拟浏览器”而不是“离子服务”命令才能使HTTP工作，因为需要科尔多瓦。之后，我可以从jsonplaceholder网站访问一个JSON示例，但仍然无法访问本地服务器。我为本地服务器尝试了所有可能的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：所有网址组合均可在浏览器中使用

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：无论是否有这些标题，我都有同样的问题

打印：

Tab One page：我按照在标签一页（我创建了离子标签项目）的 tab1.module.ts 中出现的顺序打印所有变量。
JSON output from both servers
Response Headers from both servers
Console error output when setting v5：此错误似乎与HttpClient函数有关

版本：

带有Apache Lounge的PHP 7
离子4.10.3
科尔多瓦8.1.2

我所做的一切都是基于互联网教程，因为我对ionic和php很陌生。

编辑1

图像信息为文本：

标签一页输出（与{{v1}}，{{v2}}，{{v3}}，{{v4}}，{{v5}} |为{{a1}}，{{a2}}）
VS [对象对象]， [对象对象]， [对象对象]， [object Object]，|

为 {“ userId”：1，“ id”：1，“ title”：“ delectus aut autem”，“ completed”： false}， delectus autum
JSON

我的服务器

{“成功”：true，“ dados”：“ teste”}

jsonplaceholder

{ “ userId”：1 “ id”：1 “ title”：“ delectus aut autem”， “已完成”：false }
两个服务器的响应标头

我的服务器

Access-Control-Allow-Credentials：true 连接：保持活动内容长度：37 内容类型：application / json;字符集= utf-8 日期：2019年3月19日，星期二14:55:59 GMT 保持活动：超时= 5，最大= 100 服务器：Apache / 2.4.38（Win64）PHP / 7.3.3 X-Powered-By：PHP / 7.3.3

jsonplaceholder

Access-Control-Allow-Credentials：true 缓存控制：公共，最大年龄= 14400 CF缓存状态：HIT CF-射线：4ba06d22bfc3ba18-ATL 连接：保持活动状态日期：2019年3月19日，星期二15:19:43 GMT Etag：W /“ 53-hfEnumeNh6YirfjyjaujcOPPT + s” Expect-CT：max-age = 604800，report-uri =“ https://report-uri.cloudflare.com/cdn- cgi / beacon / expect-ct“ 过期：周二，19 Mar 2019 19:19:43 GMT 语法：无缓存服务器：cloudflare 有所不同：来源，接受编码通过：1.1 vegur X-Content-Type-Options：nosniff X-Powered-By：Express
控制台错误

错误{...}错误：错误气泡：falsecancel气泡：错误cancelable：false 组成：（...） 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 的末尾，它起作用了。

在Ionic 4中无法从本地服务器获取JSON请求

0 个答案: