【问题标题】:Angular : Unable to GET local json using HttpClientAngular:无法使用 HttpClient 获取本地 json
【发布时间】:2018-05-25 22:03:03
【问题描述】:

我正在使用Angular5 中提供的最新HttpClient 组件对本地json 发出获取请求,但从那以后我得到404。我已经在我的app.module.ts 中导入了HttpClientModule 模块。

文件夹结构快照:

我正在从博客详细信息组件调用blog-list.json。这是我的代码:

  constructor(private http: HttpClient) {
  }

  ngOnInit(): void {
    // this.http.get('https://jsonplaceholder.typicode.com/posts/1').subscribe((data:Blog[]) => {
    this.http.get('app/api/blog-list.json').subscribe((data:Blog[]) => {
         this.blogs = data;
    });
  }

我收到以下错误:

GET http://localhost:909/app/api/blog-list.json 404 (Not Found)

即使我尝试通过点击http://localhost:909/src/app/api/blog-list.json 直接在浏览器中打开文件,我也会在那里获得应用程序而不是 json 文件。

请注意,对 web 上的 rest api 的注释请求是成功的,但仅对本地 json 文件的调用失败。

【问题讨论】:

  • 确保您尝试从本地 Web 服务器而不是文件系统访问 jwon。 web客户端是需要对web服务器进行http调用
  • @AniruddhaDas 我正在开发模式下运行应用程序?我做错了吗?
  • 确保:(1) 您的文件存在于服务器上的适当位置,(2) 您的服务器进程可以访问磁盘/文件(在某些情况下确实如此),(3)你有适合 JSON“application/json”的 MIME 媒体类型。
  • @Fenton 尝试过,但出现同样的错误:localhost:909/app/api/blog-list.json404(未找到)
  • @Abhi 我正在运行这是开发模式。

标签: angular http typescript angular5


【解决方案1】:

我能够解决这个问题,但它首先发生的原因有点奇怪。

为此,我必须更新 .angular-cli.json 并在 assets 属性中添加 api 文件夹的路径。现在 assets 属性看起来像:

"assets": [
    "assets",
    "app/api",
    "favicon.ico"
 ]

【讨论】:

  • 我要补充一点,我只需要使用“api”而不是“app/api”,最重要的是我必须停止服务器并使用 ng serve -o 重新启动它
猜你喜欢
  • 2018-10-03
  • 2018-11-07
  • 2019-07-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多