Angular + Laravel API 通信问题答案

【问题标题】：Angular + Laravel API communicating problemsAngular + Laravel API 通信问题
【发布时间】：2020-09-29 09:12:02
【问题描述】：

我有重要问题，请尽快帮助我

当我通过邮递员测试 laravel 部分时 - api 运行良好不幸的是，在前面我遇到了问题。它像角度尝试与4200 port 上的api 连接没有8000。

【问题讨论】：

欢迎来到SO ..你需要看看stackoverflow.com/questions/34516651/…
请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange 网络上发帖，您已在 CC BY-SA 4.0 license 下授予 Stack Exchange 分发该内容的不可撤销的权利（即无论您未来的选择如何）。根据 Stack Exchange 政策，帖子的非破坏版本是分发的版本。因此，任何破坏行为都将被撤销。如果您想了解更多关于删除帖子的信息，请参阅：How does deleting work?
请将代码和数据添加为文本 (using code formatting)，而不是图像。图片：A）不允许我们复制粘贴代码/错误/数据进行测试； B) 不允许根据代码/错误/数据内容进行搜索；和many more reasons。除了代码格式的文本之外，只有在图像添加了一些重要的东西，而不仅仅是文本代码/错误/数据传达的内容时，才应该使用图像。

标签： angular typescript

【解决方案1】：

你创建这样的代码......

    import { Injectable, EventEmitter } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs';
    
    @Injectable({
      providedIn: 'root'
    })
    export class FileService {
    
      refressFileList: EventEmitter<string> = new EventEmitter();
    
      constructor(
        private http: HttpClient
      ) { }

getBooks(): Observable<Book[]> {
        return this.http
            .get<Book[]>('http://www.localhost:8000/api/books')
            .pipe(catchError(this.handleError('getBooks', [])));
    }
    
      getData(params: any): Observable<any> {
        return this.http.get<any>('http://www.localhost:8000/api/books', params);
      }
    }

【讨论】：