Не удалось получить данные из серверной части получил 404 - PullRequest
Новая
       32

Не удалось получить данные из серверной части получил 404

0 голосов
/ 21 февраля 2019

Я пытаюсь получить данные из бэкэнда в angular7, используя HttpClient, например: 

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

    constructor(private http:HttpClient){}

    ngOnInit(){
        this.callTesting().subscribe(users => {
            console.log('users is ', users);
        })
    }

    callTesting(){
        console.log('call testing ');
        return this.http.get('https://ibomyangular.azurewebsites.net/api/Courses');
    }
}

, но получаю следующую ошибку: 

{
  "body": {
    "error": "Collection 'Courses' not found"
  },
  "url": "https://myangular.azurewebsites.net/api/Courses",
  "headers": {
    "normalizedNames": {},
    "lazyUpdate": null
  },
  "status": 404,
  "statusText": "Not Found"
}

в случае вставкиURL для браузера https://myangular.azurewebsites.net/api/Courses JSON получить загрузки.Почтальон также получает значения.

Я думал, что это из-за CORS, поэтому я добавил прокси json, например: 

{
  "api/Courses": {
    "target": "https://myangular.azurewebsites.net",
    "secure": false
  },
  "changeOrigin": true
}

Но все равно не получаю значения.в package.json я добавил начало так:

"start": "ng serve --proxy-config proxy.conf.json", Все еще не повезло.что еще мне не хватает?кто-нибудь поможет мне?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Пожалуйста, найдите ниже код.Для меня это нормально работает: 

**create interface for response data type:**
export interface Apitype {
id:any;
name:any;
description:any;
subjectId:any;
subjectTypeId:any;
subjectLevelId:any;
subjectOptionId:any;
languageId:any;
}

**create service class for api call:**
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Apitype} from './Apitype';

@Injectable()
export class ApimiddleService {

  constructor(private http: HttpClient) { }

  searchApi(){
    console.log("calling api");
//typed api call
return this.http.get<Apitype>('https://ibomyangular.azurewebsites.net/api/Courses');
  }

}

**Calling and subscribing the data ,searchapi() in apimiddle service class from app.component.ts file**
import { Component } from '@angular/core';
import { ApimiddleService } from './apimiddle.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
data :any;
constructor(private apiserv:ApimiddleService){

}
  ngOnInit(){
   console.log("calling ngOnInit");
 this.apiserv.searchApi().subscribe(data=>
      {
        console.log(data);
        this.data=data;
      });
  }

}

**view:app.component.html**
<div class="containner">
<div class="card" style="width: 18rem;" *ngFor="let course of data">
  <ul class="list-group list-group-flush">
    <li class="list-group-item list-group-item active">{{course.id}}</li>
    <li class="list-group-item">{{course.name}}</li>
    <li class="list-group-item">{{course.description}}</li>
    <li class="list-group-item">{{course.subjectId}}</li>
    <li class="list-group-item">{{course.subjectTypeId}}</li>
    <li class="list-group-item">{{course.subjectLevelId}}</li>
    <li class="list-group-item">{{course.subjectOptionId}}</li>
    <li class="list-group-item">{{course.subjectTypeId}}</li>
    <li class="list-group-item">{{course.languageId}}</li>
  </ul>
</div>
</div>
0 голосов
/ 21 февраля 2019

До того как я получил настоящий API от бэкэнда, я использовал HttpClientInMemoryWebApiModule в angular7, после того как я прокомментировал импорт модуля, он работает нормально.

Спасибо !!

...