Ionic 5 - API 请求在浏览器上工作，而不是在模拟的 IOS 上答案

【问题标题】：Ionic 5 - API request working on browser, not on emulated IOSIonic 5 - API 请求在浏览器上工作，而不是在模拟的 IOS 上
【发布时间】：2021-03-17 14:01:35
【问题描述】：

我有这个 Ionic 5/Capacitor 应用程序，我正在对本地服务器进行 API 调用，该服务器在 localhost:3000 的 docker 上运行。当我从浏览器测试时，请求很好。邮递员也要求很好。在我的 XCode 记录模拟器中，我看到了这个

[error] - ERROR {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"http://localhost:3000/pins","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:3000/pins: 0 Unknown Error","error":{"isTrusted":true}}

真正有趣的部分是我正在运行 Fiddler 来监控发出的请求。 Fiddler 也得到了 200，我什至可以看到响应数据。因此，Fiddler 看到了正确的网络调用，但随后我的 Ionic 应用程序收到了该错误。这让我觉得这是一个 Ionic/Emulator/IOS 问题，但我对 Ionic 的熟悉程度不足以立即知道它是什么。

这是负责发出请求的代码：

  ngOnInit() {
    const request = this.http.get('http://localhost:3000/pins');

    this.refresh$.subscribe(
      (lastPos: { latitude?: any; longitude?: number }) => {
        request.subscribe(data => {
          if (data) {
            this.addMarkersToMap(data, lastPos);
          }
        });
      }
    );
  }

并且构造函数中导入的HTTPClient来自Angular：

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

【问题讨论】：

标签： ios angular ionic-framework capacitor ionic5

【解决方案1】：

试试这个：

const request = this.http.get('http://localhost:3000/pins', { observe: 'response', withCredentials: true });

解决方案 2：capacitor.config.json

"server": {
    "hostname": "localhost",  (maybe try precising the port number too)
}

解决方案 3： 在您的 Express 服务器上（来自 https://ionicframework.com/docs/troubleshooting/cors）

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

const allowedOrigins = [
  'capacitor://localhost',
  'ionic://localhost',
  'http://localhost',
  'http://localhost:8080',
  'http://localhost:8100'
];

// Reflect the origin if it's in the allowed list or not defined (cURL, Postman, etc.)
const corsOptions = {
  origin: (origin, callback) => {
    if (allowedOrigins.includes(origin) || !origin) {
      callback(null, true);
    } else {
      callback(new Error('Origin not allowed by CORS'));
    }
  }
}

// Enable preflight requests for all routes
app.options('*', cors(corsOptions));

app.get('/', cors(corsOptions), (req, res, next) => {
  res.json({ message: 'This route is CORS-enabled for an allowed origin.' });
})

app.listen(3000, () => {
  console.log('CORS-enabled web server listening on port 3000');
});

【讨论】：

所以我实际上是通过切换到 Ionic Native HTTP 客户端来完成这项工作的。你会建议我切换回 Angular 客户端并尝试这个吗？
是的，请尝试告诉我。 Ionic Native HTTP 很好，但你不能在浏览器上测试它，我在用那个插件发送 POST 数据时遇到了问题，我现在不知道状态
我切换回 Angular 客户端，仍然得到与代码相同的错误： const request = this.http.get('localhost:3000/pins', { observe: 'response', withCredentials ：真的 }）; request.subscribe(_ => { this.addMarkersToMap(_); });
如果您有更多想法，我很乐意让这个解决方案发挥作用，因为现在我在使用 Ionic Native HTTP 客户端时遇到了灰屏。而且我已经检查了 API 密钥，所以我知道这不是问题。
这也可能与 CORS 问题有关，您是否在 API 上启用了 CORS？什么运行它？对我来说，我必须使用 Quarkus 在我的 application.properties 中添加 quarkus.http.cors=true。

【解决方案2】：

我最终不得不使用这个包，检查我是否在移动设备上。

https://ionicframework.com/docs/native/http/

【讨论】：