Ionic 5 - 无法显示来自 API 的数据

Question

注意：这里是 Ionic 新手。

我有以下内容：

Ionic 5（电容器）应用 Angular 11.
Express 后端 (localhost:3000)

我可以从 API 调用中获取数据并显示在浏览器中，但不能显示在模拟的 Android 设备上。我不知道如何在 Android Studio 中检查控制台错误。

这张图片可以更好地说明情况。

我认为这是由于 CORS。我试图按照 Ionic page 解决这个问题，但没有解决。

这是我的快递代码：

const express = require("express");
const cors = require("cors");
const app = express();
const port = 3000;

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

// For parsing JSON in request body
app.use(express.json());

// MySQL connection details - for POC sake.
// In PROD, these are typically saved in .env variables
// Ref: https://www.linkedin.com/pulse/storing-database-credentials-securely-siddhesh-jog
var mysql = require("mysql");
var connection = mysql.createConnection({
  host: "____________________________.us-east-2.rds.amazonaws.com",
  user: "admin",
  password: "*****************",
  database: "poc",
});

const corsOptions = {
  origin: (origin, callback) => {
    if (allowedOrigins.includes(origin) || !origin) {
      callback(null, true);
    } else {
      console.log(origin);
      callback(new Error("Origin not allowed by CORS"));
    }
  },
};

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

// Connect to MySQL
connection.connect(function (err) {
  if (err) throw err;
  console.log("Connected!");
});

// Dashboard - GET
app.get("/dashboard", cors(corsOptions), (req, res) => {
  rows = [];
  connection.query(
    "select label_id, value from poc_fct",
    function (err, result) {
      if (err) throw err;
      res.json(result);
    }
  );
});

app.listen(port, () => {
  console.log(`CORS-enabled web server listening at http://localhost:${port}`);
});

任何帮助将不胜感激。

Answer 1

最终对我有用的是将 API 端点从 http://localhost:3000/data 更改为 http://192.168.2.25:3000/data，其中 192.168.2.25 是 Express 服务器所在主机的本地 IP 地址运行.

对于将来可能遇到此问题的其他人的几点说明：

这不是 CORS 问题。我注释掉了 app.use(cors)
这不是 HTTP/HTTPS 问题
将模拟器的代理更改为 10.0.2.2:3000 无效

Ionic 5 - 无法显示来自 API 的数据

Ionic 5 - Can't display data from API

android

angular

ionic-framework

ionic5