android - Ionic 5 - 无法显示来自 API 的数据
问题描述
注意:这里的总离子新手。
我有以下内容:
- 带有 Angular 11 的 Ionic 5(电容器)应用程序。
- Express 后端 (localhost:3000)
我可以从 API 调用中获取数据并显示在浏览器中,但不能在模拟的 Android 设备上显示。我不知道如何在 Android Studio 中检查控制台错误。
这张图片可以更好地说明情况。
我认为这是由于 CORS。我尝试关注Ionic 页面,但没有解决方案。
这是我的快递代码:
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}`);
});
任何帮助将不胜感激。
解决方案
最终对我有用的是将 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不起作用
推荐阅读
- binary - 是数字还是字母(二进制转换)?
- javascript - 在语法正确的 JavaScript/jQuery 中,为什么执行永远不会超出`$('form').submit(function(event){`?
- c# - MetroListView 不隐藏文本,因为标题被缩短
- vue.js - 在 vuetify 中左右移除 padding/magrin
- python - 我正在尝试为我的代码的一部分导入图像,但它没有显示,但是它在不同的部分中进一步显示
- loops - 完成 2 个 goroutine 后删除文件
- r - 将用户定义的函数应用于小标题
- docusignapi - 在文档/模板上设置数据字段,供所有用户查看为只读
- css - 角材料容器没有扩展到填充页面?
- xamarin - Xamarin tesseract OCR 返回错误的输出和乱码