Previously I was working with react projects on .NET 3.1, and I just tried to create a fresh project on .NET 8.0 and encountered a lot of troubles and misunderstandings. I created a new controller and now trying to access it method, but I get the error 404 Not Found. I found out that frontend is trying to send requests to its own port instead of backend port. When I press “Run”, my project starts in two windows: one is google chrome that represents backend, I guess, and one in edge where frontend is. So, in the google chrome window the link is http://localhost:5239/ and in edge the link is https://localhost:5173/ which is also uncommon to me.

This is my controller:

[ApiController]
[Route("[controller]")]
public class UsersController : ControllerBase
{
    private readonly UserRepository _repo;

    public UsersController(UserRepository repo)
    {
        _repo = repo;
    }

    [HttpPost("[action]")]
    public async Task<IActionResult> RegisterUser(User user)
    {
        try
        {
            var existingUser = await _repo.GetUserByUsernameAsync(user.Login);
            if (existingUser != null)
            {
                return Conflict("Такой логин уже существует.");
            }

            // Hash the password using BCrypt
            string hashedPassword = BCrypt.Net.BCrypt.HashPassword(user.Password);

            // Replace the plaintext password with the hashed password
            user.Password = hashedPassword;

            var result = await _repo.CreateUserAsync(user, user.Password);

            return Ok(result);
        }
        catch (Exception ex)
        {
            return BadRequest(ex.Message);
        }
    }

    [HttpPost("[action]")]
    public async Task<IActionResult> GetUserByUserName(string username)
    {
        try
        {
            return Ok(await _repo.GetUserByUsernameAsync(username));
        }
        catch (Exception ex)
        {
            return BadRequest(ex.Message);
        }
    }
}

This are my Program.cs file contents:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();

var app = builder.Build();

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.

app.UseAuthorization();
app.UseHttpsRedirection();
app.UseRouting();

app.MapControllers();

app.MapFallbackToFile("/index.html");

app.Run();

This is my react component:

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './register.scss';

const Register: React.FC = () => {
    const [username, setUsername] = useState('');
    const [fio, setFio] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate();

    const handleRegister = async () => {
        try {
          const response = await fetch('api/users/RegisterUser', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ login: username, name: fio, password: password }),
          });
    
          if (response.ok) {
            console.log('Пользователь успешно зарегистрирован');
          } else {
            console.error('Не удалось зарегистрировать пользователя');
          }
        } catch (error) {
          console.error('Ошибка при регистрации пользователя:', error);
        }
      };

    return (
        <div className="register-container">
            <h2>Регистрация</h2>
            <div className='register-content'>
                <div>
                    <label htmlFor="username">Логин:</label>
                    <input
                        type="text"
                        id="username"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label htmlFor="fio">ФИО:</label>
                    <input
                        type="text"
                        id="fio"
                        value={fio}
                        onChange={(e) => setFio(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label htmlFor="password">Пароль:</label>
                    <input
                        type="password"
                        id="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                    />
                </div>
                <button onClick={handleRegister}>Регистрация</button>
            </div>
            <p>
                Уже есть аккаунт? <Link to="/login">Войти</Link>
            </p>
        </div>
    );
};

export default Register;

These are my response headers:

HTTP/1.1 404 Not Found
Access-Control-Allow-Origin: *
Date: Wed, 15 May 2024 08:34:36 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Content-Length: 0

These are my request headers:

POST /api/users/RegisterUser HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: ru,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
Connection: keep-alive
Content-Length: 45
Content-Type: application/json
Host: localhost:5173
Origin: https://localhost:5173
Referer: https://localhost:5173/register
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 Edg/123.0.0.0
sec-ch-ua: "Microsoft Edge";v="123", "Not:A-Brand";v="8", "Chromium";v="123"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

Please, tell me, what am I doing wrong or how to properly configure my app, I feel completely lost and destroyed by the modern .NET. Also please ask if you need any additional info/code.