站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

浅析Angular中怎么用 Api 代理

时间:2022-04-18 [网络编程]作者:fabuyuan 浏览:7 次

本篇文章给大家介绍一下Angular 中怎么使用 Api 代理,聊聊使用 angualr 来讲解代理 api 对接的话题,希望对大家有所帮助!

浅析Angular中怎么用 Api 代理  2

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

本文使用 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: () => {}   })   // ... }

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

浅析Angular中怎么用 Api 代理  2

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

【完】

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

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

本文标签:  angualr代理api

转载请注明来源:浅析Angular中怎么用 Api 代理

本文永久链接地址:https://www.adminjie.com/post/11264.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • oracle怎么实现主键自增

      oracle怎么实现主键自增

      方法:1、用“createsequence序列名minvalue...”创建序列;2、利用“createorreplacetrigger触发器名...

    • JavaScript字符串常见基础方法精讲

      JavaScript字符串常见基础方法精讲

      本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于字符串的相关知识,其中主要介绍了常用的基础方法以及特殊字符、emoji内部表示方式等内...

    • 一起聊聊Excel逆向查询问题

      一起聊聊Excel逆向查询问题

      本篇文章给大家带来了关于excel的相关知识,其中主要介绍了关于逆向查询的相关问题,就是关键字在数据表的右侧,而要得到内容在数据表的左侧,下面一起来看一下,希望...

    • 2022年开发人员不可错过的 Web 平台的新动态

      2022年开发人员不可错过的 Web 平台的新动态

      5月11-12日,谷歌举办了2022GoogleI/O全球开发者大会。在大会上,JakeArchibald和UnaKravet向我们介绍了...

    • linux中cp命令怎么设置不提示

      linux中cp命令怎么设置不提示

      linux中设置cp命令不提示方法:1、修改“~/.bashrc”文件,禁用cp命令的alias,只需将“aliascp='cp-i'”内容注释掉即可;2、...

    热门文章