为Angular 14配置正确的代理设置服务

1. 在angular.json文件中，找到并打开“architect”>“serve”>“options”>“proxyConfig”字段，将其值设置为代理配置文件的路径。 例如：

"architect": { "serve": { "options": { "proxyConfig": "src/proxy.conf.json" // 代理配置文件路径 }, // ... }, // ... }

2. 在项目根目录下创建代理配置文件proxy.conf.json，示例如下：

{ "/api": { // 代理的路径 "target": "http://localhost:3000", // 代理目标地址 "secure": false, // 是否需要使用https "changeOrigin": true, // 是否修改代理请求中的主机头为目标主机 "logLevel": "debug" // 日志级别 } }

3. 现在可以在应用中使用代理路径来访问目标API，示例如下：

import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' }) export class ApiService { private apiUrl = '/api'; // 代理路径

constructor(private http: HttpClient) { }

getPosts(): Observable { return this.http.get(${this.apiUrl}/posts); } }

在上面的示例中，getPosts() 方法使用代理路径来获取 API 数据并返回一个 Observable 对象。

执行以上操作后，Angular 14请求代理失败问题应该得到解决。