部署在GitHub Pages的Angular电商项目如何自动获取产品数据？

算力阿峰

2026-6-18

解决GitHub Pages部署Angular电商应用的产品数据获取问题

方案一：直接将db.json放在assets目录（静态部署最优解）

这是最适合GitHub Pages静态环境的方案，无需依赖第三方服务：

将db.json移动到src/assets目录下，确保文件路径为src/assets/db.json

检查angular.json的打包配置，确认assets目录被包含在构建资源中：

"architect": {
  "build": {
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      // 其他构建配置...
    }
  }
}

在产品服务中使用相对路径发起请求：

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

@Injectable({ providedIn: 'root' })
export class ProductService {
  private productApiUrl = 'assets/db.json';

  constructor(private http: HttpClient) {}

  getProducts() {
    return this.http.get<{ products: Product[] }>(this.productApiUrl);
  }
}

本地验证：启动ng serve后，访问http://localhost:4200/assets/db.json确认能正常返回JSON，再执行ng build（Angular 16+）或ng build --prod打包部署到GitHub Pages。

方案二：修复jsonbin.io的400错误

如果坚持使用jsonbin.io，400错误通常由权限或配置问题导致：

调整Bin权限：登录jsonbin.io找到目标Bin，将权限从「Private」改为「Public」，公开Bin无需密钥即可直接访问
核对Bin ID：确认URL中的bin ID完全正确，格式应为https://api.jsonbin.io/v3/b/[你的Bin ID]/latest
私有Bin需携带密钥：若保持Bin私有，必须在请求头中添加账户的X-Master-Key：
```
getProducts() {
  const headers = {
    'X-Master-Key': '你的jsonbin账户Master Key'
  };
  return this.http.get<any>(this.productApiUrl, { headers });
}
```
注意：不要硬编码密钥，建议用Angular环境变量（environment.ts/environment.prod.ts）存储，避免泄露。