如何将后端作为外部网址和前端之间的桥梁,用于检索文件?

huangapple go评论106阅读模式
英文:

How to make backend as a bridge between external url and frontend for retrieving files?

问题

I am trying to get a .pbf file from a map server. (but the question expands to pdf, jpg or csv)
我正在尝试从地图服务器获取.pbf文件。(但问题扩展到pdf、jpg或csv)

I wanna obtain that .pbf file and return it in a GET request.
我想获取那个.pbf文件并在GET请求中返回它。

The file comes from a private server: http:XXX.XXX.XXX.XXX/geometrictiles/${source.layername}/{z}/{x}/{y}.pbf
该文件来自私有服务器:http:XXX.XXX.XXX.XXX/geometrictiles/${source.layername}/{z}/{x}/{y}.pbf

And want to return the exact same file to a get API in mi backend, like:
并希望将完全相同的文件返回给后端的GET API,例如:

http://localhost:3001/geometrictiles/${source.layername}/{z}/{x}/{y}.pbf

So to use my backend as a bridge between mi react app, and the geometrictiles server.
因此,将我的后端用作我的React应用程序和geometrictiles服务器之间的桥梁。

I generated and endpoint in my controller like:
我在我的控制器中生成了一个端点,如下:

  1. async getGeoTiles(){
  2. const data = await this.geomService.getPBF('layername',11,585,783);
  3. // const file = createReadStream(join(stringdata, 'package.json'));
  4. // return
  5. // new StreamableFile(file);
  6. return stringdata;
  7. }```
  8. And in my service:
  9. 在我的服务中:
  10. ```async getPBF (layername, z, x, y){
  11. // just using a json route in order to test any file
  12. return this.httpService
  13. //here should be this URL, but for testing reasons
  14. //http:XXX.XXX.XXX.XXX/geometrictiles/${source.layername}/{z}/{x}/{y}.pbf
  15. .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  16. .pipe(
  17. map((res) => {
  18. // console.log('res', res);
  19. return res.data;
  20. })
  21. )
  22. .pipe(
  23. catchError(() => {
  24. throw new ForbiddenException('API not available');
  25. }),
  26. );
  27. }```
  28. But this is not returning the file json, csv nor PBF as I need.
  29. 但这不返回我需要的json、csv或PBF文件。
  30. How is this is done?
  31. 这应该如何完成?
  32. <details>
  33. <summary>英文:</summary>
  34. I am trying to get a .pbf file from a map server. (but the question expands to pdf, jpg or csv)
  35. I wanna obtain that .pbf file and return it in a GET request.
  36. The file comes from a private server: `http:XXX.XXX.XXX.XXX/geometrictiles/${source.layername}/{z}/{x}/{y}.pbf`
  37. And want to return the exact same file to a get API in mi backend, like:
  38. `http://localhost:3001/geometrictiles/${source.layername}/{z}/{x}/{y}.pbf`
  39. So to use my backend as a bridge between mi react app, and the geometrictiles server.
  40. I generated and endpoint in my controller like:

@Get(&#39;/geoserver&#39;)
async getGeoTiles(){
const data = await this.geomService.getPBF(&#39;layername&#39;,11,585,783);
// const file = createReadStream(join(stringdata, &#39;package.json&#39;));
// return
// new StreamableFile(file);
return stringdata;
}

And in my service:
async getPBF (layername, z, x, y){
// just using a json route in order to test any file
return this.httpService
//here should be this URL, but for testing reasons
//http:XXX.XXX.XXX.XXX/geometrictiles/${source.layername}/{z}/{x}/{y}.pbf
.get(&#39;https://api.coindesk.com/v1/bpi/currentprice.json&#39;)
.pipe(
map((res) =&gt; {
// console.log(&#39;res&#39;, res);
return res.data;
})
)
.pipe(
catchError(() =&gt; {
throw new ForbiddenException(&#39;API not available&#39;);
}),
);
}

  1. But this is not returning the file json, csv nor PBF as I need.
  2. How is this is done?
  3. </details>
  4. # 答案1
  5. **得分**: 0
  6. To get file using HttpService you should inject response in getGeoTiles method and write result of HttpService GET method to it response. Also, you should write 'Content-Disposition' header to response object.
  7. Here's example of this logic to retrieve file from a specific URL:
  8. ```typescript
  9. @Controller()
  10. export class AppController {
  11. constructor(private readonly httpSerivce: HttpService) {}
  12. @Get('/geoserver')
  13. async getGeoTiles(@Res() response: Response) {
  14. const { data } = await firstValueFrom(
  15. this.httpSerivce
  16. .get<ArrayBuffer>('https://api.coindesk.com/v1/bpi/currentprice.json', {
  17. // get the content as ArrayBuffer
  18. responseType: 'arraybuffer',
  19. })
  20. .pipe(
  21. catchError(() => {
  22. throw new ForbiddenException('API not available');
  23. }),
  24. ),
  25. );
  26. response.setHeader(
  27. 'Content-Disposition',
  28. // Here write filename instead of 'currentprice.json'
  29. `attachment; filename=${encodeURI('currentprice.json')}`,
  30. );
  31. // write content to response object
  32. response.write(data);
  33. // finalize
  34. response.end();
  35. }
  36. }
英文:

To get file using HttpService you should inject response in getGeoTiles method and write result of HttpService GET method to it response. Also, you should write 'Content-Disposition' header to response object.
<br>
Here's example of this logic to retreive file from specific url:

  1. @Controller()
  2. export class AppController {
  3. constructor(private readonly httpSerivce: HttpService) {}
  4. @Get(&#39;/geoserver&#39;)
  5. async getGeoTiles(@Res() response: Response) {
  6. const { data } = await firstValueFrom(
  7. this.httpSerivce
  8. .get&lt;ArrayBuffer&gt;(&#39;https://api.coindesk.com/v1/bpi/currentprice.json&#39;, {
  9. // get the content as ArrayBuffer
  10. responseType: &#39;arraybuffer&#39;,
  11. })
  12. .pipe(
  13. catchError(() =&gt; {
  14. throw new ForbiddenException(&#39;API not available&#39;);
  15. }),
  16. ),
  17. );
  18. response.setHeader(
  19. &#39;Content-Disposition&#39;,
  20. // Here write filename instead of &#39;currentprice.json&#39;
  21. `attachment; filename=${encodeURI(&#39;currentprice.json&#39;)}`,
  22. );
  23. // write content to response object
  24. response.write(data);
  25. // finalize
  26. response.end();
  27. }
  28. }

huangapple
  • 本文由 发表于 2023年4月7日 04:37:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/75953574.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定