Home > OS >  GET Request Error (Connection Reset) with Entity Framework
GET Request Error (Connection Reset) with Entity Framework

Time:07-01

So I'm making a simple notes app using Entity Framework with ASP.Net Core for my backend and AngularJS for frontend.

The expected behaviour is that when the app initiates, it should load a list of notes that are already saved in my database (MySQL)

Thing is, when my app does the Get request it rertuns the following error: enter image description here

Before this I had a problem with CORS that I solved by adding http:// to my connection string and after solving that, I got this. I've been looking all over the internet but I don't seem to find an answer.

This is my note.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class NoteService {

  private url: string = "http://localhost:44353/api/NotesLists";

  constructor(private http: HttpClient) { }

  getNotes(): Observable<Note[]> {
    return this.http.get<Note[]>(this.url);
  }
}

This is my home component (where I subscrirbe to get the response):

import { Component, OnInit } from '@angular/core';
import { NoteService } from '../services/note.service';
import { Note } from '../note';

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

  public notes: Note[] = [];
  
  constructor(private noteService: NoteService) { }

  ngOnInit(): void {
    this.noteService.getNotes()
        .subscribe(data => this.notes = data);
  }

}

And my [HttpGet] request on .Net Core

    [HttpGet]
    public IActionResult Get()
    {
        try
        {
            var response = _datacontext.NotesList
                                        .Include(notesList => notesList.Note)
                                        .ToList();

            if (response.Count == 0)
            {
                return NotFound();
            }

            return Ok(response);
        }
        catch (Exception e)
        {

            return StatusCode(500, e.Message);
        }
    }

And my DataContext for better context (Ha!)

using Microsoft.EntityFrameworkCore;
using noteAppAPI.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace noteAppAPI.Helpers
{
public class DataContext : DbContext
{
    public DataContext(DbContextOptions<DataContext> option) : base(option)
    {

    }

    public DbSet<NotesList> NotesList { get; set; }
    public DbSet<Note> Notes { get; set; }
    
}
}

CodePudding user response:

Thanks to @MarkHomer for his suggestion in the comments. The solution to this was:

Change connection string on note.service.ts from

private url: string = "http://localhost:44353/api/NotesLists";

to

private url: string = "http://localhost:44353/api/NotesLists";

This would lead me to have to enable CORS in my API so the HTTPS request would work.

To enable CORS in Startup.cs add in ConfigureServices method:

        services.AddCors(c =>
        {
            c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
        });
        services.AddDbContext<DataContext>(option => {
            option.UseMySql(connectionString, ServerVersion.AutoDetect(connectionString));
        });

And also in Configure method in the same file:

        app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
  • Related