ionic网络请求以及iOS真机"message":"Http failure response for : 0 Unknown Error","error":{"isTrusted":true}

前段时间研究使用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