Angular服务无法使用外部API

Question

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

我创建了一个服务类（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：错误的方法...”，并进入网络选项卡，Edge通知已使用Mehtod OPTIONS（因此，此错误，因为该服务期望得到GET）。

由于该调用非常简单（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）

默认情况下，在localhost:4200上运行的角度服务器，因此，如果您使用在其他域上运行的后端服务器，则如果服务器配置不正确，可能会出现CORS问题。

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

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

步骤2：在proxyConfig下的angular.json中添加serve->options键>

"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/