如何在 Angular 应用程序中区分具有相同 URL 但 ACCEPT/content 类型不同的两个端点？

Question

我正在设计一个进行导出的 Angular/SpringBoot 网络服务。

我按照这个 link 来选择如何设置我的端点。

该端点与现有端点具有相同的 url，但产生不同的内容（excel 导出而不是 JSON）。

所以我有两个端点：

得到/myapp/customers接受JSON
获取 /myapp/customers 接受 XLS (application/vnd.openxmlformats-officedocument.spreadsheetml.sheet)

如何Angular区分它们？

Angular代码：

  public export() {
        let filter = ...;
        return this.http.get(`/myapp/customers?${filter}`, { responseType: 'arraybuffer', headers: null,},)
            .subscribe(response => this.downLoadFile(response, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'));
   }
   
   /**
  * Method is use to download file.
  * @param data - Array Buffer data
  * @param type - type of the document.
  */
  downLoadFile(data: any, type: string) {
    const fileName = 'customers.xlsx';
    const a = document.createElement('a');
    document.body.appendChild(a);
    const blob = new Blob([data], { type });
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
  }

如果我按照上面的代码那样做，它会失败。

Answer 1

通过添加 Accept header，问题得到解决。

let headers = new HttpHeaders();
headers = headers.set('Accept', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');

将 headers var 解析为 http.get 方法调用的完整代码：

public export() {
        let headers = new HttpHeaders();
        headers = headers.set('Accept', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
        let filter = ...;
        return this.http.get(`/myapp/customers?${filter}`, { responseType: 'arraybuffer', headers: headers,},)
            .subscribe(response => this.downLoadFile(response, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'));
   }
   
   /**
  * Method is use to download file.
  * @param data - Array Buffer data
  * @param type - type of the document.
  */
  downLoadFile(data: any, type: string) {
    const fileName = 'customers.xlsx';
    const a = document.createElement('a');
    document.body.appendChild(a);
    const blob = new Blob([data], { type });
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
  }

如何在 Angular 应用程序中区分具有相同 URL 但 ACCEPT/content 类型不同的两个端点？

How to distinguish two endpoints with same URL but different ACCEPT/content type in an Angular application?

rest

export

endpoint

angular