1、背景

    版本：3.20.0

    本地開發環境使用代理連線後臺

    ionic.config.json中的配置

{
  "name": "app-video-ai",
  "app_id": "",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path": "/upms",
      "proxyUrl": "http://192.168.1.80:8082/upms"
    },
    {
      "path": "/api",
      "proxyUrl": "http://192.168.1.80:8889/api"
    }
  ]
}
 

    表現：使用pc端和後臺除錯沒有問題，但是生成app，通過真機訪問後臺一直報錯

    http failure response for (unknown url): 0 unknown error

2、報錯原因

    在pc端可以通過代理和後臺進行除錯，但是手機端是沒法使用代理的，只能通過直連的形式連線後臺伺服器。

3、解決思路

    在封裝的http服務中處理，真機環境下直連伺服器

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
/*
  Generated class for the HttpSerProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class HttpSerProvider {

  constructor(public http: HttpClient) {
    console.log('Hello HttpSerProvider Provider');
  }
  upmsUrl = 'http://192.168.1.80:8082';
  apiUrl = 'http://192.168.1.80:8889';
 

  public post(url: string, params: any = null, successCallback, errorCallback): any {
    // 此處使用的post模式為非嚴格模式，如果要使用嚴格模式，請把引數放在第二個位置 覆蓋null
    // 正式釋出不能使用代理，此處要做個處理
    url = this.getUrl(url);
    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);
      }
    });
  }

  /**
   * 處理正式釋出環境導致的路徑問題，請求出錯
   * @param url
   * @returns {any}
   */
  getUrl(url) {
    // TODO 開發環境這段可以先註釋掉
    let realUrl;
    if (url.startsWith('upms')) {
      realUrl = this.upmsUrl + '/' + url;
    } else if(url.startsWith('/upms')) {
      realUrl = this.upmsUrl + url;
    } else if(url.startsWith('api')) {
      realUrl = this.apiUrl + '/' + url;
    } else {
      realUrl = this.apiUrl + url
    }
    url = realUrl;
    return url;
  }
  // get資料
  public get(url: string, params?: any): any {
    const token = this.getToken();
    url = this.getUrl(url);
 

    return this.http.get(url, {
      headers: this.getHeaders(), // 新增token資訊
      params: params
    });
  }
  // 刪除相關請求
  public delete(url: string, params?: any): any {
    url = this.getUrl(url);
    return this.http.delete(url, {
      headers: this.getHeaders(), // 新增token資訊
      params: params
    });
  }

  /**
   * 頭部資訊獲取，主要用於處理token
   */
  private getHeaders() {
    const token = this.getToken();
    const headers = {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Methods': 'GET,POST,OPTIONS,DELETE,PUT'};
    if (token) {
      headers['token'] = token;
    }
    return new HttpHeaders(headers);
  }
  /**
   * 處理響應的事件
   * @param res
   * @param {Function} error
   */
  private responseSuccess(res: any, callback) {
    if (res.code !== '0') { // 失敗
      if (res.msg) {
        callback({code: res.code, msg: res.msg});
      } else {
        const data = res.data;
        let errorMsg = '操作失敗！';
        data.map(i => {
          errorMsg = i.errorMsg + '\n';
        });
        callback({code: res.code, msg: errorMsg});
      }
    } else {
      callback(res);
    }
  }

  /**
   * 處理請求失敗事件
   * @param url
   * @param err
   */
  private requestFailed(url: string, err) {
    let msg = '請求發生異常';
    const status = err.status;
    if (status === 0) {
      msg = '請求失敗，請求響應出錯';
    } else if (status === 404) {
      msg = '請求失敗，未找到請求地址';
    } else if (status === 500) {
      msg = '請求失敗，伺服器出錯，請稍後再試';
    } else {
      msg = '未知錯誤，請檢查網路';
    }
    return msg;

  }

  /**
   * 使用本地快取的方式來獲取token資訊
   */
  getToken() {
    return window.localStorage.getItem('app-video-ai-token');
  }

  /**
   * 將token資訊儲存到本地快取中 用快取的形式實現token驗證
   * @param token
   */
  setToken(token) {
    // 目前只解析token欄位，快取先只存該欄位
    //  + token.name + token.email + token.avatar + token.id + token.time
    // JSON.stringify(token)
    window.localStorage.setItem('app-video-ai-token',
      token.token);
  }

  /**
   * 清理token
   */
  clearToken() {
    window.localStorage.setItem('app-video-ai-token', null);
  }
  // 監聽初次載入事件入口
  load() {
    if (this.getToken()) {
    //  驗證token資訊，驗證通過繼續處於登入狀態
    } else {
      // 正常去登入頁面

    }
  }
}