Угловой HTTP-запрос не работает правильно

Question

Angular сводит меня с ума.

У меня есть две кнопки. Если я нажму на первую, я хочу сделать этот запрос:

https://localhost:44373/api/events

Если я нажму на второй, я хочу сделать этот запрос:

https://localhost:44373/api/events/1

Будет вызван метод "getNextPost ()", и он, кажется, работает, но на стороне сервера не будут вызваны адресуемые методы.

Вот моя реализация клиента:

 export class AppComponent implements OnInit {
  title = 'EventsPresenter';
  _hubconnection : signalR.HubConnection;

  _notification : string = '';

  displayedColumns: string[] = ['eventDateTime', 'nbr', 'element', 'parent', 'stateTypeTitle', 'enumValueTitle', 'customerObject'];

  ROOT_URL = 'https://localhost:44373/';
  ROOT_API_URL = this.ROOT_URL + 'api/';
  dataSource: Observable<EventData[]>;
  dataSource2: Observable<EventData>;

  constructor(private http: HttpClient) {}

  getPosts(){
    this.dataSource = this.http.get<EventData[]>(this.ROOT_API_URL + 'events')
  }

  getNextPost(){
    this.dataSource2 = this.http.get<EventData>(this.ROOT_API_URL + 'events/1')
  }


  ngOnInit() {

    this._hubconnection = new signalR.HubConnectionBuilder() 
    .configureLogging(signalR.LogLevel.Trace) 
    .withUrl('https://localhost:44373/notify') 
   .build(); 

    this._hubconnection
      .start()
      .then(() => console.log('Connection Started'))
      .catch(err => console.log('Error while establishing connection'));

      this._hubconnection.on('BroadcastMessage', (data: EventData) => {    
        console.log(data);
        this.dataSource.subscribe(v => v.push(data));
      });

  }
}

Вот моя реализация сервера:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using convisAPI.DataProvider;
using convisAPI.Interfaces;
using EntityLibrary;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;

namespace convisAPI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class EventsController : ControllerBase
    {
        //EventDataProvider eventDataProvider;

        IEventDataRepository _eventDataRepository;

        IHubContext<NotifyHub> _hubContext;

        public EventsController(IEventDataRepository eventDataRepository, IHubContext<NotifyHub> hubContext)
        {
            _eventDataRepository = eventDataRepository;
            _hubContext = hubContext; 
        }

        // GET api/events
        [HttpGet]
        public async Task<ActionResult<IEnumerable<EventSummary>>> Get()
        {
            return await _eventDataRepository.GetEvents();
        }

        // GET api/values/5
        [HttpGet("{id}")]
        public async Task<ActionResult<EventSummary>> Get(int id)
        {

            Random r = new Random();

            var ra = r.Next(212, 220);

            await _hubContext.Clients.All.SendAsync("BroadcastMessage", new EventSummary()
            {
                Element = "Mein Element " + ra,
                Details = "Das ist mein Eventgrund",
                EventID = Guid.NewGuid(),
                ElementID = Guid.NewGuid(),
                EventDateTime = DateTime.Now,
                Nbr = ra,
                StateNbr = ra,
                EnumValueTitle = "Störung",
                StateEnumValue = 110 + ra
            });


            return new EventSummary();



        }

        // POST api/values
        [HttpPost]
        public void Post([FromBody] string value)
        {
        }

        // PUT api/values/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody] string value)
        {
        }

        // DELETE api/values/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }
}

Я знаю, что код "Get (int id)" может показаться вам странным, но я в основном хочу вызвать Уведомление SignalR.

Есть идеи?

С наилучшими пожеланиями

Answer 1

Здесь 2 вопроса.

первый: Метод HttpClient.get () возвращает Observable. Observable не запускается / срабатывает, если на них нет подписки. Например:

/* This wont work because it is not subscribed. */
someMethod() {
http.get(someUrl);
}

// this is work since it is subscribed.
someMethod() {
http.get(someUrl).subscribe(res => console.log(res));
}

Так что в вашем случае звонок на сервер не выполняется. Проверьте в сети браузера. Если вызов сделан, то он должен показываться там.

2-й: ВЫПУСК CORS . Так как источник запроса к серверу и ответ от сервера различаются, возможно, у вас возникла проблема cors. На этапе разработки вы можете использовать плагин для браузера, чтобы обойти это, но это все равно произойдет во время производства (когда вы начнете жить). Для правильного разрешения необходимо внести некоторые изменения на стороне сервера. Добавьте их на свой сервер:

  // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

Answer 2

в Angular, каждый HTTP-запрос будет «срабатывать» только тогда, когда кто-то их слушает.

Итак, если нет никого, кто подписывается, то не будет никакого http-запроса.

getPosts(){
    this.http.get<EventData[]>(this.ROOT_API_URL + 'events')
         .subscribe(result => this.dataSource = result)
}

getNextPost(){
    this.http.get<`EventData>(this.ROOT_API_URL + 'events/1')
        .subscribe(result => this.dataSource2 = result)
}

Я бы написал немного иначе, но это личный стиль. Вместо

getPosts(){
   this.dataSource = this.http.get<EventData[]>(this.ROOT_API_URL + 'events')
 }

я бы написал

getPosts():Observable<EventData[]>{
   return this.http.get<EventData[]>(this.ROOT_API_URL + 'events')
}

и тогда я подпишусь в точке, где мне нужны данные.

...
this.getPosts().subscribe(result => this.isWhereINeedit = result)

С уважением