1,开发中跨域问题

开发阶段，项目中遇到跨域问题，解决方式也基本是两种

1，pc 端支持跨域调用，或者支持 jsonp调用

2，配置代理 ，网上各种资料的配置基本全是错误的

正确的方式是：1，首先新建一个  proxy.config.json 文件

内容如下：

{
    "/DEV": {
        "target": "http://10.123.183.17:80/test/",
        "secure":false,
        "logLevel":"debug",
        "changeOrigin":true,
        "pathRewrite":{
            "^/DEV":""
        }
    }
}

2，在angular.json 文件中替换 serve 的 options 配置

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "proxyConfig": "./proxy.config.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        }

2，打包App 跨域问题及解决方案

使用 httpClient 结合 ionic-native-http-connection-backend 插件实现跨域

步骤如下：

1.安装如下插件：
ionic cordova plugin add cordova-plugin-advanced-http
npm install @ionic-native/http 
npm install --save ionic-native-http-connection-backend

2.在app.module.ts 中配置

import { Platform } from '@ionic/angular';
import { HttpBackend, HttpXhrBackend,HttpClientModule  } from '@angular/common/http';
import { NativeHttpModule, NativeHttpBackend, NativeHttpFallback } from 'ionic-native-http-connection-backend';

@NgModule({

    ....

  imports: [
    HttpClientModule,
    NativeHttpModule,
    ],
  providers: [

      ....

    {provide: HttpBackend, useClass: NativeHttpFallback, deps: [Platform, NativeHttpBackend, HttpXhrBackend]},

    
  ]

})


3.使用httpClient

3.1引入
    import { HttpClient, HttpParams } from '@angular/common/http';
3.2构造器中初始化
    constructor( public http: HttpClient) { }
3.3发起网络请求
//编码提交参数
 private encodeHttpParams(params: any): any {
  if (!params) return null;
  return new HttpParams({fromObject: params});
}
 //登录接口
 login(userName: string, psw: string){
    let pram: any = {
      'loginName': userName,
      'loginPass': psw
    };
   
     this.http.post(this.baseUrl+ this.LOGIN, this.encodeHttpParams(pram))
     .subscribe(response=>{

     },err=>{
       
     });
 }