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

Question

Note : Total Ionic newbie here.

I have the following:

• Ionic 5 (Capacitor) app with Angular 11.
• Express backend (localhost:3000)

I can fetch data from an API call and display in the browser, but not on the emulated Android device. I don't know how to check for console errors in Android Studio.

This image can explain the situation better.

I think this is due to CORS. I tried to follow the Ionic page on this but no resolution.

Here is my Express code:

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}`);
});

Any help will be greatly appreciated.

Answer 1

What finally worked for me was changing the API endpoint from http://localhost:3000/data to http://192.168.2.25:3000/data , where 192.168.2.25 is the local IP address of the host where the Express server is running.

Few notes for anyone else who might have this issue in the future:

1. This isn't a CORS issue. I commented out app.use(cors)
2. This isn't a HTTP/HTTPS issue
3. Changing the emulator's proxy to 10.0.2.2:3000 did not work