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

Posted 2023-02-21

【中文标题】Ionic 5 - API 请求在浏览器上工作，而不是在模拟的 IOS 上

【英文标题】：Ionic 5 - API request working on browser, not on emulated 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';

【参考方案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/