需求場景：

獲取后端api接口數(shù)據(jù),需要跨域。有時(shí)，后臺(tái)可能有多個(gè)業(yè)務(wù)，提供不同的API，為了方便管理，需要我們在一個(gè)文件里配置好。這樣，以后要更改接口時(shí)就很方便了。

解決方案

• 建立本地代理proxy.config.json文件:

  angular6項(xiàng)目里新建proxy.config.json文件 ，放在根目錄，proxy.config.json（文件名可以隨便取，但建議統(tǒng)一）配置內(nèi)容，可參考：here。由于angular集成了webpack，所以你也可以研究webpack

  {
  "/apidata":{
      "target":"http://xxxxx:8093",
      "secure":false,
      "logLevel":"debug",
      "changeOrigin":true,
      "pathRewrite":{
      "^/apidata":""
          }
      }
  }
  

  這里定義的/apidata就是路由匹配規(guī)則 遇到這個(gè)開始解析 ，并且跟pathRewrite 定義的要一致target 設(shè)置的就是跨域域名端口。

• angular.json配置文件加載配置代理文件proxy.config.json:

  在angular.json文件中使用上面的配置文件(添加"proxyConfig":"proxy.config.json")

  "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
      "browserTarget": "appname:build",
      "proxyConfig":"proxy.config.json"
  },
  
  

• 服務(wù)文件里使用http.get獲取接口數(shù)據(jù)，url地址需要配置上代理重寫規(guī)則的 /apidata

  • 命令行建立服務(wù): ng g s 服務(wù)名
  • import HttpClient
  • contructor 定義http參數(shù): constructor(private http: HttpClient)
  • 使用HttpClient獲取遠(yuǎn)程服務(wù)器接口數(shù)據(jù)，地址就前面加上代理文件的匹配/apidata ,后面在接上正確的地址，subcribe后面輸出數(shù)據(jù)

    import {Injectable, OnInit} from '@angular/core'
    import {HttpClient} from '@angular/common/http'
  
    @Injectable({
        providedIn: 'root'
    })
    
    export class DataService implement OnInit {
  
        constructor(private http: HttpClient) {}
  
        getData() {
            this.http.get('apidata/api/index').subscribe(
                data => data // 此處可以做數(shù)據(jù)轉(zhuǎn)換、清洗
            )
        }
  
        ngOnInit() {}
    }
  

• 組建內(nèi)調(diào)用服務(wù)獲取數(shù)據(jù)

    import { Component, OnInit } from '@angular/core';
    import { DataService } from '../data.service';
  
    @Component({
    selector: 'app-data',
    templateUrl: './data.component.html',
    styleUrls: ['./data.component.css']
    })
    export class DataComponent implements OnInit {
  
        constructor(private dataservice:DataService) { }
        ngOnInit() {
            this.dataservice.getData();
        }
    }