Angular6-proxy.config.json实现跨域

需求场景：

获取后端api接口数据,需要跨域。有时，后台可能有多个业务，提供不同的API，为了方便管理，需要我们在一个文件里配置好。这样，以后要更改接口时就很方便了。

解决方案

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

  angular6项目里新建proxy.config.json文件 ，放在根目录，proxy.config.json（文件名可以随便取，但建议统一）配置内容，可参考：here。由于angular集成了webpack，所以你也可以研究webpack

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

  这里定义的/apidata就是路由匹配规则 遇到这个开始解析 ，并且跟pathRewrite 定义的要一致target 设置的就是跨域域名端口。

• 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"
  },
  
  

• 服务文件里使用http.get获取接口数据，url地址需要配置上代理重写规则的 /apidata

  • 命令行建立服务: ng g s 服务名
  • import HttpClient
  • contructor 定义http参数: constructor(private http: HttpClient)
  • 使用HttpClient获取远程服务器接口数据，地址就前面加上代理文件的匹配/apidata ,后面在接上正确的地址，subcribe后面输出数据

    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 // 此处可以做数据转换、清洗
            )
        }
  
        ngOnInit() {}
    }
  

• 组建内调用服务获取数据

    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();
        }
    }