我使用axios来请求从我的外部API获取数据(它是带有ExpressJS和Nginx的HTTP AWS服务器)。我在我的本地机器上使用Ionic应用程序的Web版本进行了测试,一切都在预期中。如果我使用手机的浏览器,我也可以获取数据。
Postman 也一样,我可以毫无问题地获取数据。
这些请求唯一不起作用的地方是实际设备。查看Android Studio控制台,错误是:“Msg:Network Error”(无法弄清楚如何从axios错误对象获取更多信息)。
我按照官方的Ionic文档配置了CORS。我已经设置了所有需要的origin和选项(不能使用 * origin,因为我必须在请求中使用凭据)。Express配置看起来像这样:
const corsOptions = {
origin: [
'http://localhost:8100',
'http://localhost:8080',
'http://localhost',
'capacitor://localhost',
'ionic://localhost',
],
credentials: true,
optionsSuccessStatus: 200,
exposedHeaders: ["set-cookie"]
}
// Enable preflight requests for all routes
app.options('*', cors(corsOptions));
app.use(cors(corsOptions));
在客户端(请求示例):
try {
const response = await axios('http://my.api.url', {
method: 'get',
withCredentials: true,
headers: {
'Accept': 'application/json'
}
});
const data = response.data;
// Do something with the data
} catch(error) {
console.log(error);
};
我认为这与Capacitor有关,可能是非https API的问题(但问题是为什么它与Web版本一起工作)。我尝试禁用请求的凭据,但错误再次发生。此外,删除Nginx似乎也没有改变任何事情。
更新:axios也说请求已经发送,但服务器没有响应。
2条答案
按热度按时间w41d8nur1#
我把它整理好了,我必须跟着做。
1.不得不在我的网络服务器上添加SSL(我使用了letsencrypt)。
1.不得不在capacitor.config.json中添加以下内容:
“server”:{“allowNavigation”:[“我的.API.url”] }
官方电容器文档-常见配置
a14dhokn2#
这是因为Laravel的CSRF令牌问题。
干脆去
app/Http/Middleware/VerifyCsrfToken.php
在受保护的$except数组中添加
'api/*'
,如下所示(这是一个快速解决方案)