{Angular}错误试图连接到服务器（解析过程中的HTTP故障）

Question

我正在尝试制作一个动态的网页。我在本地JSON中有数据，我想使用JSON服务器连接到模拟服务器。

如果我使用本地地址（例如“ SRC/Assets/data/data.json”），则没有错误，我可以访问而没有并发症。当我想使用地址“ http：// localhost：5000”执行相同操作时，问题就来了。

错误对象{标题：{…}，状态：200，statustext：“ ok”，url：“ http：// localhost：5000/”，ok：ok ok：false，name：“ httperrorresponse”，message：“在解析http：// localhost：5000/“，错误：{…}}

我搜索信息但没有找到（或不明白）如何修复它。我不知道它是否会有所帮助（并且在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中重新创建了它。

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>

就是这样。

尽管这不是我所期望的，但至少我解决了并学到了它。