Angular 代理配置用于 API 调用

引言

在使用 Angular 时，我们会从 API 获取数据。每次调用时，都需要编写完整的 API URL。但如果 API URL 发生更改，或者我们不想重写完整的 URL，该怎么办？这时 Angular 提供了“代理配置”。

背景

需要对设置 Angular 项目有基本的了解。 按照步骤操作，我们就能实现目标。

Using the Code

1. 首先，创建一个名为“proxy.config.json”的文件（在package.json文件所在的目录）。
2. 在文件中写入以下代码

    {
       "/api/*": {
         "target": "http://jsonplaceholder.typicode.com",
         "secure": false,
         "pathRewrite": {"^/api" : ""},
         "changeOrigin":true,
         "logLevel": "debug"
       }
     }

   注意：务必在此文件中添加 pathRewrite 行... 这负责处理像
   /api/users 或 /api/posts 这样的 API 调用。

   {
     "name": "ng6",
     "version": "0.0.0",
     "scripts": {
       "ng": "ng",
       "start": "ng serve --proxy-config proxy.config.json",
       -------

3. 更新 package.json 文件，以便在启动项目时启用代理服务器。

   以上行告诉 npm 为 API 创建代理。
   注意：请先停止当前运行的服务器，然后使用“npm start”命令，这将导致调用“ng serve --proxy-config proxy.config.json”。

4. 调用 API：使用 get/post 方法调用 API，如下所示

     getUsers(){
       return this.http.get('/api/users')
     }