• 技术文章 >web前端 >js教程

    浅析Angular中怎么用 Api 代理

    青灯夜游青灯夜游2022-04-18 10:54:32转载596
    本篇文章给大家介绍一下Angular 中怎么使用 Api 代理,聊聊使用 angualr 来讲解代理 api 对接的话题,希望对大家有所帮助!

    作为前端开发,我们跟后端对接接口是很频繁的事情,但是,我们对接的过程中总是遇到跨域的问题,那么我们如何解决呢?

    本文使用 angualr 来讲解代理 api 对接的话题。【相关教程推荐:《angular教程》】

    首先我们先来了解下,什么跨域。

    跨域

    简单理解:当一个请求的协议、域名(ip地址)、端口三部分任意一个当前页面的 url 不同就是跨域

    以我的站点 https://jimmyarea.com 为例:

    被请求的地址是否跨域原因
    jimmyarea.com协议不同
    jimmyarea.cn地址不同
    https://127.0.0.1:9000地址和端口号不同

    代理

    这个时候,我们可以通过代理,本地联调不同环境的 api 地址。

    首先,我们在项目的根目录上新建一个文件 proxy.conf.json

    我们以接口请求 https://jimmyarea.com/api/public/article?page=-1 为例子:

    {
      "/api": {
        "target": "https://jimmyarea.com/",
        "changeOrigin": true,
        "secure": false,
        "pathRewrite": {
          "^/api": "/api"
        }
      }
    }

    target 是代理的地址,pathRewrite 是对代理的前缀的重写。

    完成了代理文件之后,需要开启代理。我们在 package.json 中添加多一条命令行,表明是开发环境调试使用。

    "script": {
      "dev": "ng serve --proxy-config=proxy.conf.json",
    }

    执行 npm run dev 启动项目并带上代理。每次代理文件更改,需要重新启动下该命令行~

    验证

    我们新建一个 article 的服务,其中 article.service.ts 文件内容如下:

    import { Injectable } from '@angular/core';
    // http 客户端
    import { HttpClient } from '@angular/common/http'
    
    @Injectable({
      providedIn: 'root'
    })
    
    export class ArticleService {
    
      constructor(
        private http: HttpClient
      ) { }
       
      // 获取文章列表
      getArticleList() {
        return this.http.get('/api/public/article', {
          // 返回类型
          responseType: 'json',
          // 请求的参数
          params: {
            page: -1
          }
        })
      }
    
    }

    上面的请求,在页面上地址是 http://localhost:4200/api/public/article?page=-1,其实访问的是地址 https://jimmyarea.com/api/public/article?page=-1。我们可以在 user-list.component.ts 中调用验证一下:

    ngOnInit():void {
      this.articleService.getArticleList().subscribe({
        next: (data: any) => {
          console.log(data)
        },
        error: () => {}
      })
      // ...
    }

    程序跑起来后,你可以在控制台上看到下面的网络请求:

    1.png

    Good Job, Bro. 我们能够完美代理后端所给的地址,进行调试了,并且代理可不止代理一个地址哦。读者可以编写多个代理地址验证一下~

    【完】

    更多编程相关知识,请访问:编程入门!!

    以上就是浅析Angular中怎么用 Api 代理的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:angualr 代理api
    上一篇:带你了解JavaScript中的键盘、鼠标事件 下一篇:一起来分析JavaScript中的弱引用和强引用
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 用AngualrJs使用定时器• 聊聊Angular中与视图有关的一些定义• 聊聊Angular 依赖注入体系中的基本概念• 聊聊Angular中怎么将迁移tslint至eslint• Angular学习之以Tooltip为例了解自定义指令
    1/1

    PHP中文网