Ionic 4无法获取本地PHP服务器JSON请求的问题及解决

我之前也碰到过和你完全一样的状况，折腾了好一阵才解决，分享下我的经验：

问题还原 #

一开始在Ionic 4里用ionic serve测试HTTP请求完全没反应，换成ionic cordova emulate browser后，访问jsonplaceholder的示例API一切正常，但不管怎么换本地PHP服务器的URL（比如http://192.168.0.21/WebServer/Ionic/process.php、localhost/xxx这些），都拿不到数据，页面显示异常，控制台还抛HttpErrorResponse状态码0的错误——关键是这些本地URL直接在浏览器里打开完全没问题！

找到问题根源 #

翻了一堆日志和文档才发现，罪魁祸首是本地PHP接口没返回正确的CORS响应头。你看你的process.php里虽然加了Access-Control-Allow-Credentials和Content-Type，但漏掉了最关键的Access-Control-Allow-Origin，浏览器的同源策略直接把请求拦截了。

解决步骤 #

只需要给你的PHP接口补上这个响应头就行：

修改后的process.php代码 #

<?php
$result = "{ \"success\": true, \"dados\": \"teste\" }";
// 注意：CORS头要在输出内容之前设置
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Content-Type: application/json; charset=utf-8");
echo $result;
?>

⚠️ 重要提醒：用*只是临时测试用的方案，会带来CSRF安全风险，正式环境一定要把*替换成你的Ionic应用的具体源地址，比如http://localhost:8100或者你部署后的域名。

额外小贴士 #

1. 为什么ionic serve不行但ionic cordova emulate browser可以？
   • ionic serve是基于Angular开发服务器的，跨域限制更严格；而ionic cordova emulate browser是模拟Cordova原生环境，不过它本质还是在浏览器里跑，所以依然会遵循浏览器的同源策略，CORS头还是必须的。
2. 不管你用@ionic-native/http插件还是Angular自带的HttpClient发起请求，只要是通过浏览器环境访问本地接口，都得处理CORS问题。

内容的提问来源于stack exchange，提问作者sofiapazz