离子 2 http.get() 问题

Posted 2023-03-13

【中文标题】离子 2 http.get() 问题

【英文标题】：Ionic 2 http.get() issue

【发布时间】：2017-03-15 00:26:06

【问题描述】：

我尝试使用这两种方法拨打http.get()。

第一：

getResults()
    return this.http.get('http://localhost/api.php')
    .toPromise()
    .then( data => data.json() );

错误显示：

3     122412   error    EXCEPTION: Uncaught (in promise): Response with status:0  for URL: null
4     122413   error    ORIGINAL STACKTRACE:
5     122413   error    Error: Uncaught (in promise): Response with status: 0  for URL: null
..........

第二：

getResults()
    return new Promise((resolve, reject) => 
      this.http.get('http://localhost/api.php')
        .map(res => res.json())
        .subscribe(data => 
          resolve(data);
        , (err) => 
          reject(err);
        );
    );

错误显示：

2     925052   error    EXCEPTION: Uncaught (in promise): Response with status:0  for URL: null
3     925052   error    ORIGINAL STACKTRACE:
4     925053   error    Error: Uncaught (in promise): Response with status: 0  for URL: null
.......

我应该使用哪种方法，可能会出现什么问题？

【参考方案1】：

响应状态为：0 对于 URL：null

这似乎与 CORS 问题有关...请检查您的后端代码中是否启用了 CORS。

我应该使用哪种方式？

http.get() 返回一个 Observable，因此使用它的一种方法是

getResults()
  this.http.get('http://localhost/api.php')
           .map(res => res.json());

然后当您调用该方法时，您需要这样做：

this.yourService.getResults().subscribe((data) =>  console.log(data); );

如果你需要返回一个承诺，那么你可以这样做：

getResults()
  this.http.get('http://localhost/api.php')
           .map(res => res.json())
           .toPromise();

并像这样使用它

this.yourService.getResults().then((data) =>  console.log(data); );

【参考方案2】：

看起来这是一个 CORS 问题。通常，您必须将所有允许访问您的 API 的域列入白名单。但是因为你正在编写一个 Ionic 应用程序，所以一旦你构建了你的应用程序并在你的设备上运行它就无关紧要了。这就是为什么我建议安装一个允许您禁用 CORS 的浏览器插件。

你的两个代码 sn-ps 都做同样的事情。如果你不想使用 observables，我可能会选择第一个选项：

getResults() 
    return this.http.get('http://localhost/api.php')
                    .toPromise();

然后：

this.service.getResults().then(data => 
    // Do something with data
);

【参考方案3】：

如果您在浏览器中进行测试并遇到 CORS 问题，ionic 有一个解决方案 您应该在 ionic.config 中添加类似的内容，并且在运行 ionic serve 时，它​​会在没有 CORS 的情况下为您代理 API。

  // ...
  "proxies": [
    "path": "/api",
    "proxyUrl": "http://xxxxxxxxx"
  ]

更多信息在这里：http://blog.ionic.io/handling-cors-issues-in-ionic/