JSON returning index.html

Viewed 114

I am working on a To Do List Web App that uses React.js on the front end, ASP.NET Core on the backend, and a SQL Server to store and access data. My SQL server has some pre-loaded data for the services of testing: 1 Create To Do List. This is my js function that attempts to communicate with my Controller:

    const response = await fetch('https://localhost:5001/api/ToDos/Index');
      const data = await response.json()
      this.setState({todos: data, loading:false})
  }

However, the result returns my index.html file. Here is my Startup.cs file:

namespace ASP.NETCoreWebApplication
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            services.AddDbContext<ToDoListDBContext>(options => options.UseSqlServer("DBConString"));
            // In production, the React files will be served from this directory
            services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/build"; });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
            });
        }
    }
}

and my HTTPGET controller that I am trying to use to populate the web site with the pre-existing data on load:

        [Route("api/ToDos/Index")]
        public IEnumerable<ToDos> Index()
        {
            return _toDosDal.GetAllToDos();
        }

Any insight to why this is happening would be much appreciated. Thank you.

0 Answers
Related