前段时间研究使用ionic构建iOS-APP，结果在基本的网络请求上都是各种磕磕碰碰，网上有效的资料也是相当少，现记录如下以供后人参考。
ps：本人使用mac本，所述方法只在mac上使用过。
首先是在浏览器上对ionic构建的网络请求做调试，代码如下：
http.service.ts里面
private getHeaders() {
const headers = {'Content-Type': 'application/json','Access-Control-Allow-Origin': '*','Access-Control-Allow-Methods': 'GET,POST,OPTIONS,DELETE,PUT'};
return new HttpHeaders(headers);
}
public post(url: string, params: any = null, successCallback, errorCallback): any {
return this.http.post(url, null, {
params: params,
headers: this.getHeaders(), // 添加token信息
}).subscribe((res: any) => {
this.responseSuccess(res, function (msg) {
if (successCallback) {
successCallback(res, msg);
}
});
}, err => {
if (errorCallback) {
errorCallback(err);
}
});
}
调用代码：
const params = {
'username' : this.access,
'password' : this.password
};
console.log(params);
this.http.post('你自己的URL地址', params, (res, msg)=>{
console.log(res);
}, (err)=>{
console.log(err);
});
放心大胆的按着文档敲完，然后调用过去，然后傻眼，报错如下：
Access to XMLHttpRequest at '' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
啰哩吧嗦一大堆，简单来说就是请求跨域了，而现在绝大部分浏览器为了安全，都是禁止跨域请求的，但是照着文档敲代码都能遇到这么大的坑，这个框架真是... ...无力吐槽，想知道跨域原理的自行百度，这里贴出本人的解决办法。
打开终端，输入如下命令：
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-d
这里本人使用的是谷歌浏览器，用上面的命令可以打开一个暂时关闭跨域的谷歌浏览器窗口，在本窗口内测试，可以绕过跨域问题。这样就可以正常的在浏览器调试和开发了。
注意：只有新开的这一个窗口是关闭跨域的，别的窗口并不受影响，这个窗口关闭以后需要再次使用命令行打开。也许谷歌会提示你这样不安全，关闭提示就行了。
在浏览器上调试完毕之后就可以上真机了，按官方文档可以打包成Android和iOS各自的版本。Android本人没尝试过，在iOS真机测试的时候发现在浏览器上好不容易弄好的网络请求又炸了，报错如下：
{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"你的请求URL","ok":false,"name":"HttpErrorResponse","message":"Http failure response for 你的请求URL: 0 Unknown Error","error":{"isTrusted":true}}
这他妈的什么鬼！我完全对着官！方！文！档！打包的好不好！！！
由于在真机上调试的时候代码被编译过了，暂未深入查验原因。根据大佬的解释，这是由于iOS的WebView机制造成的。
大家都知道，ionic用的是web的技术，用ionic来搞APP，实际上就是个跑在手机web控件上的H5。而iOS的web控件经历了两个时代，首先是UIWebView，后来因为这玩意的各种bug和缓存问题，苹果又开发了WKWebView来替代前者，现在已经要求强制使用WKWebView了。ionic在和UIWebView一起玩的时候，因为UIWebView不禁止跨域，所以一直顺风顺水，现在换上了WKWebView，正巧这又是一个禁止跨域请求的主，结果傻眼了。（我就知道混合不靠谱，就算没这么巧合的事情，原生迟早也要找混合APP的茬，不给投入又想白用别人的生态，哪有这么便宜的事情）
So：如果按官方的解释这还是跨域问题，那么浏览器的跨域用命令行解决，真机咋办呢？
官方给出的解决方案是使用ionic原生的请求插件，详见官方文档：https://ionicframework.com/docs/native/http/
代码如下：
const params = {
'username' : this.access,
'password' : this.password
};
console.log(params);
this.httpY.setDataSerializer('urlencoded');
this.httpY.post('你自己的URL地址', params, {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET,POST,OPTIONS,DELETE,PUT'})
.then(data => {
console.log("backObj " + data.data);
let backObj = JSON.parse(data.data);
})
.catch(error => {
alert(error.error);
console.log("err " + error.status);
console.log("err " + error.error); // error message as string
console.log("err " + error.headers);
});
网上有人说ionic原生的请求插件很坑，就算对着文档也难请求成功（因为官方文档太潦草了），这里稍微记录下本人使用中发现的需要注意的点：
1.注意setDataSerializer这个方法，请求body的数据类型实际上是这玩意控制的，正常应该是请求头里面设置'Content-Type'来控制body数据是text，或者是json什么的，但是ionic原生插件里面是用这个方法设置的，而且是全局的，一个地方设置，所有请求数据的类型全变，如果你的各个接口数据类型不一样，那么需要在请求之前，分别设置！
2.返回数据data.data，这个是官方文档给出的返回值获取方式，但是这里的后一个data是string型，不是对象，在解析数据之前，需要先使用JSON.parse转义一次，这个倒不是很坑，只是与我的使用习惯相悖。
最后记录下本次问题解决过程中对我帮助最大的一篇文章，表示感谢：
https://blog.csdn.net/u012365780/article/details/80449682