{Angular} 尝试连接到服务器时出错（解析期间的 Http 失败）

Question

我正在尝试制作一个动态网页。我在本地 json 中有数据，我想使用 json-server.

连接到模拟服务器

如果我使用本地地址（如“src/assets/data/data.json”），则不会出现错误，我可以轻松访问。当我想使用地址“http://localhost:5000”做同样的事情时，问题就来了。

ERROR Object { headers: {…}, status: 200, statusText: "OK", url: "http://localhost:5000/", ok: false, name: "HttpErrorResponse", message: "Http failure during parsing for http://localhost:5000/", error: {…} }

我搜索了信息但没有找到（或不明白）如何修复它。我不知道它是否有帮助（我在 Internet 上找到了它）但是如果我将“|json”添加到插值代码中，结果我会得到“null”。好吧，我留下我的代码。感谢任何帮助。

一个例子json:

{
  "block":{
    "block1":"block1",
    "block2":"block2",
    "block3":"block3"
  }
}

我的服务：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {
  private apiUrl = 'http://localhost:5000/'
  constructor(private http:HttpClient) { }

  getData():Observable<any>{
    return this.http.get(this.apiUrl)
  }
}

我的组件模板“连接”：

<h1 style="text-align: center;">{{myTest?.block.block1}}</h1>
<h1 style="text-align: center;">{{myTest?.block.block2}}</h1>
<h1 style="text-align: center;">{{myTest?.block.block3}}</h1>

我的组件 ts:

import { MyserviceService } from './../../services/myservice.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-connection',
  templateUrl: './connection.component.html',
  styleUrls: ['./connection.component.css']
})
export class ConnectionComponent implements OnInit {
  myTest:any;
  constructor(private dataTest:MyserviceService) { }

  ngOnInit(): void {
    this.dataTest.getData().subscribe(data => {
      this.myTest = data;
    });
  }
}

我也在 Stackblitz 中重新创建了它。

https://stackblitz.com/edit/angular-tc-fd?file=src%2Fapp%2Fservices%2Fmyservice.service.ts

Answer 1

这有点尴尬，我不知道它是否“正确”，但我会自己回答，因为我被问了一个简单的问题，所以我能够解决它。

json-server 有一个欢迎页面，在我的例子中，地址是“localhost:5000”。问题是我的程序想要从不是 json 的欢迎页面获取信息。但是，如果我添加位于“localhost:5000/block”中的资源，它会显示它并且我的代码将如下所示。

export class MyserviceService {
  private apiUrl = 'http://localhost:5000/block'
  constructor(private http:HttpClient) { }

  getData():Observable<any>{
    return this.http.get(this.apiUrl)
  }
}

加上模板中的小改动。

<h1 style="text-align: center;">{{myTest?.block1}}</h1>
<h1 style="text-align: center;">{{myTest?.block2}}</h1>
<h1 style="text-align: center;">{{myTest?.block3}}</h1>

就是这样。

虽然不是我想的那样，但至少我解决了，学到了。

{Angular} 尝试连接到服务器时出错（解析期间的 Http 失败）

{Angular} Error trying to connect to server (Http failure during parsing for)

json

angular

http

server

json-server