Ionic网络请求（解决跨域和参数序列化的问题）

以你之姓@ 2022-05-25 04:40 129阅读 0赞

Ionic   -v  3.20.0

Node  -v   8.9.1

Cordova -v 8.0.0

Angular 4

import {ChangeDetectorRef, Component, Injectable} from '@angular/core';
    import {HttpClient,HttpHeaders} from "@angular/common/http";
    
    /**
     * Generated class for the AddressSelectPage page.
     *
     * See https://ionicframework.com/docs/components/#navigation for more info on
     * Ionic pages and navigation.
     */
    
    @Injectable()
    export class HttpService {
      httpurl='http://192.168.1.8:8080/CarRental/';//你的服务器地址前缀
      constructor(public http: HttpClient) {
    
      }
    
      GET(urlmethod , callback ?: (res: any, error: any) => void): void  {
        this.http.get('' + this.httpurl + '' + urlmethod + '').subscribe(data =>
          { callback && callback(data, null);},
          err =>{callback && callback(null, err);}
        )
      }
    
    
    
      //Common post method  post请求参数序列化
      POST(data, urlmethod , callback ?: (res: any, error: any) => void): void  {
        // let headers = new Headers({
        //   'Content-Type': 'application/x-www-form-urlencoded'
        // });
        const headers = new HttpHeaders().set("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
          this.http.post('' + this.httpurl + '' + urlmethod + '', this.toQueryString(data), {headers})
            .subscribe(data =>
            { callback && callback(data, null);},
                err =>{callback && callback(null, err);}
            )
      }
      //Common post method  post可以提交json参数，参数没有使用toQueryString序列化
      POST2(data, urlmethod , callback ?: (res: any, error: any) => void): void  {
        // let headers = new Headers({
        //   'Content-Type': 'application/x-www-form-urlencoded'
        // });
        const headers = new HttpHeaders().set("Content-Type", "application/json;charset=utf-8");
        this.http.post('' + this.httpurl + '' + urlmethod + '', data, {headers})
          .subscribe(data =>
            { callback && callback(data, null);},
            err =>{callback && callback(null, err);}
          )
      }
    
      POSTForm(data, urlmethod, callback ?: (res: any, error: any) => void): void   {
    
        const headers = new HttpHeaders().set("Content-Type", "multipart/form-data; charset=utf-8");
        //const headers = new HttpHeaders().set("Content-Type", "application/x-www-form-urlencoded");
         this.http.post('' + this.httpurl + '' + urlmethod + '', data, {})
          .subscribe(data =>
            { callback && callback(data, null);},
            err =>{callback && callback(null, err);}
          )
      }
    
      //post请求参数序列化
      // POST(data, urlmethod) {
      //
      //   const headers = new HttpHeaders().set("Content-Type", "application/x-www-form-urlencoded");
      //   return this.http.post('' + this.httpurl + '' + urlmethod + '', this.toQueryString(data), {headers})
      //     .map(res => res);
      // }
      //参数序列化
      private toQueryString(obj) {
        let result = [];
        for (let key in obj) {
          key = encodeURIComponent(key);
          let values = obj[key];
          if (values && values.constructor == Array) {
            let queryValues = [];
            for (let i = 0, len = values.length, value; i < len; i++) {
              value = values[i];
              queryValues.push(this.toQueryPair(key, value));
            }
            result = result.concat(queryValues);
          } else {
            result.push(this.toQueryPair(key, values));
          }
        }
        return result.join('&');
      }
      //参数序列化
      private toQueryPair(key, value) {
        if (typeof value == 'undefined') {
          return key;
        }
        return key + '=' + encodeURIComponent(value === null ? '' : String(value));
      }
    
    }