Angular 服务无法使用外部 API

Question

我正在尝试从 Angular 9 应用程序中使用外部 API （ http://developer.perfectgym.com/api/memberships/memberships/ ）。

我创建了一个服务 class （ perfectgym.service.ts ）如下（简化）：

const httpOptions = {
  headers: new HttpHeaders({
    'Authorization': 'Bearer BlAhbLaHblAH'
  })
};

@Injectable({
  providedIn: 'root'
})
export class PerfectgymService {
  private PERFECTGYM_API = "https://demo.perfectgym.pl/Api";

  constructor(private httpClient: HttpClient) { }

  getAvailableMemberships() {
     return this.httpClient.get(this.PERFECTGYM_API+'/Memberships/Memberships?timestamp=0', httpOptions);
  }
}

然后我将它用于我的组件（ membership.component.ts ），如下所示：

export class MembershipComponent implements OnInit {
  memberships: any = [];

  constructor(private api: PerfectgymService) { }

  ngOnInit(): void {
    this.api.getAvailableMemberships().subscribe(data => {
      for (const d of (data as any)) {
        this.memberships.push({
          id: d.id,
          timestamp: d.timestamp,
          name: d.name,
          isActive: d.isActive,
          isDeleted: d.isDeleted
        });
      }
      console.log(this.memberships);
    });
  }
}

当访问页面并检查它的结果时，在 Edge DevTools 控制台上我可以看到错误“HTTP405：BAD METHOD ...”并进入网络选项卡，Edge 通知使用了 mehtod OPTIONS（因此出现错误，因为服务需要得到）。

由于调用非常简单（ httpClient.get ），我决定使用 Chrome 对其进行调试。 Chrome，而不是 Edge，显示请求是使用 GET 完成的，而是 405 错误，我可以看到控制台显示 CORS 错误：

但是，通过控制台（curl/Invoke-RestMethod）或 SoapUI 调用 API 是可行的。 因此，API 似乎正在工作并开放给外部调用。

由于我是 Angular 的新手，我不知道如何解决这个问题，欢迎任何建议。

Answer 1

CORS（跨域资源共享）是一个系统，由传输 HTTP 标头组成，用于确定浏览器是否阻止前端 JavaScript 代码访问跨域请求响应。 （ https://developer.mozilla.org/en-US/docs/Glossary/CORS ）

angular 服务器默认在localhost:4200上运行，因此如果您使用在不同域上运行的后端服务器，如果您的服务器配置不正确，您可能会遇到 CORS 问题。

这可以通过配置服务器来解决，如果需要，可以尝试以下方法来解决问题。

第 1 步：创建代理配置文件src/proxy.conf.json并添加此

{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false,
        "logLevel": "debug"
    }
}

第二步：在serve- serve->options下添加proxyConfig键到angular.json

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

然后运行您的 Angular 应用程序。

参考： https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

Answer 2

试试这种方式，我使用的是 Angular/cli 版本 13.0。

@Injectable()
export class PerfectgymService {
  private PERFECTGYM_API = 'https://demo.perfectgym.pl/Api';

  constructor(private httpClient: HttpClient) { }

  getAvailableMemberships() {
     return this.httpClient.get<any>(this.PERFECTGYM_API + '/Memberships/Memberships?timestamp=0');
  }
}