美文网首页
Angular6-proxy.config.json实现跨域

Angular6-proxy.config.json实现跨域

作者: 月上秦少 | 来源:发表于2019-06-09 14:25 被阅读0次

需求场景:

获取后端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();
          }
      }
    

相关文章

  • Angular6-proxy.config.json实现跨域

    需求场景: 获取后端api接口数据,需要跨域。有时,后台可能有多个业务,提供不同的API,为了方便管理,需要我们在...

  • #hello,JS:15 同源策略 & 跨域(JSONP)

    跨域有几种常见的方式?你有没有跨域使用的经验? 方式: 使用jsonp实现跨域?使用cors实现跨域?浏览器另类的...

  • node跨域访问数据

    node返回数据时,设置下面头部跨域实现跨域

  • 跨域问题总结

    跨域, 为什么需要跨域?跨域有什么不好?怎么实现跨域? 一、什么是跨域 只要协议、域名、端口有任何一个不同,都被当...

  • 跨域问题总结

    跨域, 为什么需要跨域?跨域有什么不好?怎么实现跨域? 一、什么是跨域 只要协议、域名、端口有任何一个不同,都被当...

  • 什么是跨域?跨域有几种实现形式:

    跨域指的是跨过同源策略,实现不同域之间进行数据交互的过程叫跨域。跨域的实现形式主要有JSONP方法、CORS方法、...

  • 跨域

    跨域指的是跨过同源策略,实现不同域之间进行数据交互的过程叫跨域。跨域的实现形式主要有JSONP方法、CORS方法、...

  • 浏览器跨域问题,教你手写实现jsonp跨域

    跨域概述为什么会有跨域跨域解决办法:1、jsonp;2、后台代理手写实现jsonp跨域(包括服务器端代码) 跨域问...

  • JavaScript - GET/POST及跨域方法

    xhr 原生方法请求 window fetch 方法 关于跨域 利用JSONP实现跨域调用 使用 CORS(跨域资...

  • vue-cli proxyTable配置

    前端的跨域转发 后端不需要配置,前端就可以实现跨域 proxyTable 的通常配置 这样就可以实现基本的跨域转发...

网友评论

      本文标题:Angular6-proxy.config.json实现跨域

      本文链接:https://www.haomeiwen.com/subject/lcegxctx.html