Angular中使用Api 代理的实现

2024-09-02 23:26:01

跨域

简单理解：当一个请求的协议、域名（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: () => {}
  })
  // ...
}

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

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

到此这篇关于Angular中使用Api 代理的实现的文章就介绍到这了,更多相关Angular Api 代理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

AngularJS API之copy深拷贝详解及实例

angular提供了一个可以复制对象的api--copy(source,destination),它会对source对象执行深拷贝. 使用时需要注意下面几点: 如果只有一个参数(没有指定拷贝的对象),则返回一个拷贝对象如果指定了destination,则会深拷贝对象复制给destination 如果source是null或者undefined,那么会直接返回source 如果source就是desitination,那么会报错. 下面看看使用样例: <html> <head> &
AngularJs 利用百度地图API 定位当前位置获取地址信息

第一.申请百度密钥很简单的几步就搞定第二.引入文件  <script src="http://api.map.baidu.com/components?ak=WUfZTjKPuZ2G5RmgD0Psejv6XOmIEQVQ"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2
AngularJS中的API（接口）简单实现

AngularJS API API 意为 Application Programming Interface(应用程序编程接口). AngularJS 全局 API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象迭代对象转换对象全局 API 函数使用 angular 对象进行访问. 以下列出了一些通用的 API 函数: API 描述 angular.lowercase() 转换字符串为小写 angular.uppercase() 转换字
AngularJS 中文API参考手册

AngularJS 参考手册 AngularJS 指令本教程用到的 AngularJS 指令 : 指令描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变时要执行的表达式 ng-check
详解angular 中的自定义指令之详解API

自定义属性的四种类别分为: 元素E,属性A,注释M,类C , 分别如下: <my-dir></my-dir> <span my-dir="exp"></span>  <span class="my-dir: exp;"></span> 简单创建一个指令 html结构: <div ng-controller="
Angular中使用Api 代理的实现

目录跨域代理验证作为前端开发,我们跟后端对接接口是很频繁的事情,但是,我们对接的过程中总是遇到跨域的问题,那么我们如何解决呢? 本文使用 angualr 来讲解代理 api 对接的话题. 首先我们先来了解下,什么跨域. 跨域简单理解:当一个请求的协议.域名(ip地址).端口三部分任意一个当前页面的 url 不同就是跨域. 以我的站点 https://jimmyarea.com 为例: 被请求的地址是否跨域原因 jimmyarea.com 是协议不同 jimmyarea.cn 是
Angular中的请求拦截的方法

目录区分环境添加拦截器验证在上一篇的文章Angular 中使用 Api 代理,我们处理了本地联调接口的问题,使用了代理. 我们的接口是单独编写的处理的,在实际的开发项目中,有众多的接口,有些需要登陆凭证,有些不需要.一个一个接口处理不妥,我们是否可以考虑对请求进行拦截封装呢? 本文章来实现下. 区分环境我们需要对不同环境下的服务进行拦截.在使用 angular-cli 生成项目的时候,它已经自动做好了环境的区分,在 app/enviroments 目录下: environments ├
vue如何获取配置代理文件中的api地址值

目录获取配置代理文件的api地址值带你了解vue中的API 全局API Vue 实例中的选项实例属性与方法特殊的属性获取配置代理文件的api地址值一般vue项目中,前后端服务接口调试数据,需要配置api的代理.在代理文件config/index.js中,配置后台服务的IP地址.如图. 如果想在某个页面上查看,代理的该IP地址. 则在该页面上引入配置文件,在找到对应的值. 引入 import API_CONFIG from "../../../config/index.js"
基于angular中的重要指令详解($eval,$parse和$compile)

在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile.其实这两个服务讲的人已经很多了,但是100个读者就有100个哈姆雷特,我在这里讲讲自己对于他们两个服务的理解. 大家可能会疑问,$eval呢,其实他并不是一个服务,他是scope里面的一个方法,并不能算服务,而且它也基于parse的,所以只能算是$parse的另一种写法而已,我们看一下ng源码中$eval的定义是怎样的就知道了 $eval: fu
Angular中使用ui router实现系统权限控制及开发遇到问题

前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配
详解vue-cli本地环境API代理设置和解决跨域

前言我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的. 我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置.我们可以直接通过node.js代理服务器来实现跨域请求. vue proxyTable接口跨域请求调试在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子: de
Java中反射动态代理接口的详解及实例

Java语言中反射动态代理接口的解释与演示 Java在JDK1.3的时候引入了动态代理机制.可以运用在框架编程与平台编程时候捕获事件.审核数据.日志等功能实现,首先看一下设计模式的UML图解: 当你调用一个接口API时候,实际实现类继承该接口,调用时候经过proxy实现. 在Java中动态代理实现的两个关键接口类与class类分别如下: java.lang.reflect.Proxy java.lang.reflect.InvocationHandler 我们下面就通过InvocationHan
Python程序中设置HTTP代理

0x00 前言大家对HTTP代理应该都非常熟悉,它在很多方面都有着极为广泛的应用.HTTP代理分为正向代理和反向代理两种,后者一般用于将防火墙后面的服务提供给用户访问或者进行负载均衡,典型的有Nginx.HAProxy等.本文所讨论的是正向代理. HTTP代理最常见的用途是用于网络共享.网络加速和网络限制突破等.此外,HTTP代理也常用于Web应用调试.Android/IOS APP 中所调用的Web API监控和分析,目前的知名软件有Fiddler.Charles.Burp Suite和mi
Angular中使用MathJax遇到的一些问题

前言话说我本来是倾向于 KaTeX 的,因为我感觉他很快,而且 MathJax 似乎很难配.但是大家表示对缺少功能的 KaTeX 并无好感,给我提供了一些钻研 MathJax 的动力. MathJax简介 MathJax是一款运行在浏览器中的开源数学符号渲染引擎,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片.目前,MathJax可以解析Latex.MathML和ASCIIMathML的标记语言.MathJax项目于2009年开始,发起人有American Mathemat
在Angular中使用JWT认证方法示例

本文介绍了在Angular中使用JWT认证方法示例,分享给大家,具体如下: 项目地址: grading-system 基于session的认证和基于token的认证的方式已经被广泛使用.在session认证中,服务端会存储一份用户登录信息,这份登录信息会在响应时传递给浏览器并保存为Cookie,在下次请求时,会带上这份登录信息,这样就能识别请求来自哪个用户. 在基于session的认证中,每个用户都要生成一份session,这份session通常保存在内存中,随着用户量的增加,服务端的开销会增大

Angular中使用Api 代理的实现

目录

跨域

代理

验证

相关推荐

随机推荐