如何通过脚手架配置Angular项目以实现高效代理设置？

本文共计768个文字，预计阅读时间需要4分钟。

本章节为您介绍如何基于脚手架配置Angular代理（proxy），希望对您有所帮助！

Angular代理配置教程：

1.在Angular项目中创建一个新的服务文件（例如：proxy.service.ts）。

2.在该服务文件中，使用HttpClient模块来请求API。

3.使用@Injectable()装饰器将服务标记为可注入。

4.在模块中提供该服务。

5.在组件中注入该服务并使用它来发送请求。

以下是一个简单的示例：

typescript

import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root'})export class ProxyService {

constructor(private http: HttpClient) { }

getData() { return this.http.get('/api/data'); }}

在组件中注入并使用ProxyService：

typescriptimport { Component, OnInit } from '@angular/core';import { ProxyService } from './proxy.service';

@Component({ selector: 'app-example', templateUrl: './example.component.', styleUrls: ['./example.component.css']})export class ExampleComponent implements OnInit {

constructor(private proxyService: ProxyService) { }

ngOnInit() { this.proxyService.getData().subscribe(data=> { console.log(data); }); }}

更多详细内容，请参考官方文档：[Angular + proxy 配置 + 官网文档](https://angular.io/guide/build)

本篇文章给大家介绍一下如何基于脚手架配置 Angular 代理（proxy），希望对大家有所帮助！

Angular proxy 配置

• 官网文档 angular.io/guide/build#using-corporate-proxy

为何做？

写一个代理文件，将匹配的请求代理到其他地址，解决本地开发跨域问题。

如何配置？

• 在根目录中创建一个proxy.config.js
• 可以在这个文件中做如下配置
• 在 package.json的运行项目命令中加入 --proxy-config proxy.config.js

配置介绍

const PROXY_CONFIG = [ { context: ['/api'], target: 'xxx', secure: false, changeOrigin: true, pathRewrite: { '^/api': '', }, }, ]; module.exports = PROXY_CONFIG;

• context: 需要匹配的path
• target: 代理到的地址
• pathRewrite: 将请求的部分path重写，它是一个对象，键是^+要重写的path， 值是替换的path。
• secure: 安全设置
• changeOrigin: 改变源

配置实例

如localhost:4208/auth/login

想要代理到

www.baidu.com/news/login

可以这样配置

const PROXY_CONFIG = [ { context: ['/auth/login'], target: 'www.baidu.com', pathRewrite: { '^/auth/login': '/news/login', }, }, ] module.exports = PROXY_CONFIG;Q： 如果有两个接口，一个/api/cer/register,另外一个/api/cer/login,我该如何将两个接口代理到不同的地址？

{ context: ['/api/cer/login'], target: 'xxx1', secure: false, changeOrigin: true, }, { context: ['/api'], target: 'xxx2', secure: false, },

使用/api，只要是匹配到这个的都会走它的代理，不过如果在它前面加了个更加精确的/api/cer/login,会优先匹配到它，走这个代理。

更多用法更新于 github：

github.com/deepthan/blog-angular

更多编程相关知识，请访问：编程入门！！