0

My API Action:

[HttpGet]
public ActionResult<IEnumerable<Loan>> Get()
{
    return _context.Loans;
}

Loan.cs

public class Loan
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int Id { get; set; }
    public string BorrowerName { get; set; }
    public decimal RepaymentAmount { get; set; }
    public decimal FundingAmount { get; set; }
}

Loan.ts

export class Loan {
    constructor(
        public Id : number,
        public BorrowerName : string,
        public RepaymentAmount : number,
        public FundingAmount : number
    ) { }
}

loans.component.ts

I can see that the http get is indeed calling my API and it is returning the expected data.

import { Component, OnInit } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { Loan } from '../loan';
import { Observable } from 'rxjs';

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

  loans: Loan[];

  constructor(private http:HttpClient) {

    this.getLoans().subscribe((loans) => {
      this.loans = loans;
      console.log(loans);
    })
  }

  getLoans() {
    return <Observable<Loan[]>> this.http.get('http://localhost:1113/api/loans');
  }

  ngOnInit() {
  }
}

I am seeing this error in the console:

enter image description here

How can I get to the bottom of this?

Bassie
  • 9,529
  • 8
  • 68
  • 159

1 Answers1

2

The console says the request is blocked due to CORS. You need to add CORS support to the server: https://enable-cors.org/server.html.

Read more about CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors.

Kristoffer Jälén
  • 4,112
  • 3
  • 30
  • 54
  • Thanks Kristoffer, I managed to find [this answer](https://stackoverflow.com/questions/44379560/how-to-enable-cors-in-asp-net-core-webapi) thanks to your comment – Bassie Dec 08 '18 at 18:16