ASP .NET Core + React Ошибка 404 при запросе

@locki131 · Регистрация: 10.12.2022

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Есть следующая проблема: в приложении на ASP + React не получается построить API, при любом запросе - ошибка 404. Пробовал использовать роутинг на атрибутах - эффект тот же.
Так же пробовал добавить свой контроллер к дефолтному шаблону ASP + React, итог: стандартный контроллер WeatherForecast работает, мой (RegistrationController) - нет.
Если создавать MVC проект без реакта - проблем нет, контроллер работает.
Огромные подозрения падают на прокси SPA, вернее на его конфигурацию, но инфу по данному вопросу найти не смог (да и вообще не очень понял зачем он нужен).
Заранее всем спасибо, кидание тапками и ссылками приветствуется.

Program.cs

Кликните здесь для просмотра всего текста

C#
1
2
3
4
5
6
7
8
9
10
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
 
var app = builder.Build();
app.UseStaticFiles();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}"
);
app.Run();

RegistrationController.cs

Кликните здесь для просмотра всего текста

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
using Microsoft.AspNetCore.Mvc;
 
namespace Test.Controllers
{
    public class RegistrationController : ControllerBase
    {
        [HttpPost]
        public string Index()
        {
            return "Welcome to the club, buddy *slaps*";
        }
    }
}

index.js

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
import React from 'react';
import ReactDOM from 'react-dom';
import Registration from "./components/registration";
import {onLoad} from "./fetch";
 
document.addEventListener("DOMContentLoaded", onLoad);
ReactDOM.render(<Registration />, document.getElementById('root'));

fetch.js

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
async function onLoad() {
    let v = await fetch("Registration/Index", {method: "post"});
    console.log(await v.text);
}
 
export {onLoad};

setupProxy.js (как я понял, именно здесь настраивается прокси)

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');
 
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:13479';
 
const context =  [
    "/weatherforecast",
];
 
module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  });
 
  app.use(appProxy);
};

@locki131 · 25.01.2023, 20:49 **[ТС]**

Igor-san, сам по себе контроллер не заработал. А вот на счёт портов и прокси интересно, можно немного подробнее? В package.json портов не вижу. Пробовал в setupProxy.js ставить в target адрес, взятый из launchSettings (https://learn.microsoft.com/ru... ew=vs-2022), но это ничего не изменило.

@Igor-san · 25.01.2023, 20:54

Сообщение от locki131

Igor-san, сам по себе контроллер не заработал.

Вот начало файла package.json

JavaScript
1
2
3
4
5
6
{
  "name": "tempProjectCreation",
  "proxy": "https://localhost:7030",
  "version": "0.1.0",
  "private": true,
  "dependencies": {

Вот строка из launchSettings.json

C#
1
"applicationUrl": "https://localhost:7030;http://localhost:5092"

вот из src\setupProxy.js

C#
1
 target: 'https://localhost:7030',

код контроллера работает и так

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
using Microsoft.AspNetCore.Mvc;
 
namespace Backend.Controllers
{
    //[ApiController]
    //[Route("/Registration")]
    public class RegistrationController : ControllerBase
    {
        [HttpPost]
       // [Route("Index")]
        public string Index()
        {
            return ("Registration/Index fired");
        }
 
        [HttpPost]
        //[Route("Post1")]
        public string Post1()
        {
           // Console.WriteLine("Post1: " + content);
             return ("Registration/Post1 fired");
        }
 
    }
}

Ну и получение (можно и Postman )

JavaScript
1
2
3
4
5
6
7
8
        let v = fetch("Registration/Post1", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
        }).then((response) => {
            console.log(response);
        })

@locki131 · 25.01.2023, 21:01 **[ТС]**

Хммм, интересно. У меня файлы выглядят иначе:
package.json

Кликните здесь для просмотра всего текста

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
{
  "name": "project1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^5.1.3",
    "http-proxy-middleware": "^2.0.6",
    "jquery": "^3.6.0",
    "merge": "^2.1.1",
    "oidc-client": "^1.11.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-bootstrap": "^0.26.1",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "reactstrap": "^9.1.1",
    "rimraf": "^3.0.2",
    "web-vitals": "^2.1.4",
    "workbox-background-sync": "^6.5.3",
    "workbox-broadcast-update": "^6.5.3",
    "workbox-cacheable-response": "^6.5.3",
    "workbox-core": "^6.5.3",
    "workbox-expiration": "^6.5.3",
    "workbox-google-analytics": "^6.5.3",
    "workbox-navigation-preload": "^6.5.3",
    "workbox-precaching": "^6.5.3",
    "workbox-range-requests": "^6.5.3",
    "workbox-routing": "^6.5.3",
    "workbox-strategies": "^6.5.3",
    "workbox-streams": "^6.5.3"
  },
  "devDependencies": {
    "ajv": "^8.11.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.18.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-flowtype": "^8.0.3",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.0",
    "eslint-plugin-react": "^7.30.1",
    "nan": "^2.16.0",
    "typescript": "^4.7.4"
  },
  "overrides": {
    "autoprefixer": "10.4.5"
  },
  "resolutions": {
    "css-what": "^5.0.1",
    "nth-check": "^3.0.1"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

launchSettings.json

Кликните здесь для просмотра всего текста

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:30284",
      "sslPort": 0
    }
  },
  "profiles": {
    "Project1": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "http://localhost:5136",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      }
    }
  }
}

setupProxy.js

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');
 
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:30284';
 
const context =  [
    "/weatherforecast"
];
 
module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  });
 
  app.use(appProxy);
};

Контроллер, конечно, рабочий) В обычном Mvc темплейте они нормально работают, а вот в темплейте с реактом не хотят...

UPD postman возвращает следующее:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <title>Error</title>
</head>
 
<body>
    <pre>Cannot POST /Registration/Post1</pre>
</body>
 
</html>

@Igor-san · 25.01.2023, 21:18

Я делал по https://learn.microsoft.com/ru... ew=vs-2022 два раза. Первая установка через какое то время вообще перестала фурычить, виснет при запуске, еще чего-то. Установил снова, и вот заработало. Причем можно WeatherForecastController не трогать. Вот код Program.cs

Кликните здесь для просмотра всего текста

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var builder = WebApplication.CreateBuilder(args);
 
// Add services to the container.
 
builder.Services.AddControllers();
 
var app = builder.Build();
 
// Configure the HTTP request pipeline.
 
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
 
app.MapControllerRoute(
        name: "default",
        pattern: "{controller}/{action}");
 
 
app.Run();

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
  "name": "tempProjectCreation",
  "proxy": "https://localhost:7030",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.2.4",
    "http-proxy-middleware": "^2.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prestart": "node aspnetcore-https && node aspnetcore-react"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "jest-editor-support": "^31.0.1"
  }
}

@locki131 · 25.01.2023, 22:57 **[ТС]**

Попробовал создать как в том руководстве Microsoft - и... Другие контроллеры опять не работают, только дефолтный)

Добавлено через 21 минуту
UPD: Так-с, есть интересная зацепка: в файле setupProxy.js заменил

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
const context =  [
    "/weatherforecast",
];

на

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
const context =  [
    "/registration"
];

и RegistrationController заработал, при этом дефолтный работать перестал.

UPD2: Сделал так:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
const context =  [
    "/weatherforecast",
    "/registration"
];

Работают оба контроллера. Кто сможет объяснить это колдунство?

@HF · 26.01.2023, 00:53

Сообщение от locki131

Работают оба контроллера. Кто сможет объяснить это колдунство?

Немного о другом. Вы почему упорно не проверяете Postman.ом? Сначала надо им делать - убеждаться что запросы вообще проходят, а потом уже лезть во фронтеэнд. Например, два контроллера моментально проверяются даже простым браузером через GET методы. И сразу выясняется таким образом - работает бакэнд роутинг или нет. Разве это сложнее, чем "работать на ощупь"?
Вы ведь ещё не сильно разбираетесь, но упорно усложняете себе процесс разработки и отладки.

@locki131 · 26.01.2023, 12:33 **[ТС]**

HF, собственно, им под конец и начал проверять.
Про Postman просто не знал до этого. Прикинул, что проблема должна решиться легко и разбираться ещё с чем-то не хотел.

Принял, осознал, штука классная.

Сообщение от HF

убеждаться что запросы вообще проходят

Мне показалось, что раз работает один контроллер, то должны работать все... А во фронт полез из-за этой статьи: https://create-react-app.dev/d... evelopment . Но что-то мне подсказывает, что проблема не должна решаться так...

@Igor-san · 26.01.2023, 16:34

Сообщение от locki131

Работают оба контроллера. Кто сможет объяснить это колдунство?

Там я ничего не трогал кроме порта, если есть желание глянуть, вот моя демка что работает (у меня по крайней мере). https://disk.yandex.ru/d/sRKhB5Xs9p5VbQ

@Dr9vik · 26.01.2023, 23:11

Сообщение от HF

Вы почему упорно не проверяете Postman.ом?

вместо постмана рекомендую Api Talend
расширения для браузера

@locki131 · 27.01.2023, 17:50 **[ТС]**

Сообщение от Igor-san

вот моя демка что работает (у меня по крайней мере)

Postman пишет: Proxy error: Could not proxy request /Registration/Index from localhost:3000 to https://localhost:7030/ (ECONNREFUSED). Опять чем-то прокси не нравится. Пробую посылать на :7030 - пишет что нет подключения.

@IamRain · 27.01.2023, 18:32

locki131,
вы не можете сравнить адреса, куда отправляются ваши запросы?
Это просто как взять две пилюли, одна - в правую руку, другая - в левую. И посмотреть одинаковые они по цвету или нет.
Прокси нужен для локальной разработки фронта, не более того, насколько я помню.
Подключаете бэк - прокси нафиг не нужен. Задавались вопросом - что такое есть прокси вообще?

Добавлено через 1 минуту
PS: Не уверен на самом деле, какую роль в реакте прокси выполняет. Обычно на фронте Webpack Development Server работает, насколько я помню.

@locki131 · 27.01.2023, 18:59 **[ТС]**

Сообщение от IamRain

вы не можете сравнить адреса, куда отправляются ваши запросы?
Это просто как взять две пилюли, одна - в правую руку, другая - в левую. И посмотреть одинаковые они по цвету или нет.

Не совсем понял, к чему этот комментарий. Возможно, я не правильно сформулировал ответ... При попытке послать запрос на бэк возникает

Сообщение от locki131

Proxy error: Could not proxy request /Registration/Index from localhost:3000 to https://localhost:7030/ (ECONNREFUSED)

.
После этого я ради интереса кинул ещё на :7030, который в ошибке фигурирует, но там ожидаемо нет подключения.

Сообщение от IamRain

Задавались вопросом - что такое есть прокси вообще?

В самых общих чертах - да. Но какую роль он играет здесь - без понятия. Тут вроде как описано зачем он нужен, но я понять пока не смог: https://create-react-app.dev/d... evelopment.
Я бы и не трогал этот прокси, но только редактирование setupProxy.js позволяет работать контроллерам (при чём, судя по всему, такая проблема только у меня)

@IamRain · 27.01.2023, 19:36

Выложите свой код на гитхаб - посмотрим, лень вопроизводить ошибку с нуля.

Добавлено через 9 минут

Сообщение от locki131

(ECONNREFUSED)

Предположительно это Connection Refused, возможная причина - нету сервиса, который бы слушал порт 3000.
Судя по всему, это проблема фронта - ваш прокси просто не запущен, отсюда и ошибка.
И можно обойтись вполне без него.

Добавлено через 13 минут
FYI:

Keep in mind that proxy only has effect in development (with npm start),

Добавлено через 12 минут
Гитхааааб.
Или просто удалите нафиг все что связано с этим Proxy, и добавьте CORS-политики на бэкенде, чтобы мог принимать запросы с origin-а фронта.

@locki131 · 27.01.2023, 19:40 **[ТС]**

Сообщение от IamRain

Гитхааааб.

Не по теме:

Залью, просто надо ещё вспомнить что там да как... :)

@IamRain · 27.01.2023, 19:44

Add local hosted repo to Github using git

@locki131 · 27.01.2023, 20:05 **[ТС]**

Сообщение от IamRain

Выложите свой код на гитхаб - посмотрим, лень вопроизводить ошибку с нуля.

https://github.com/Sawtooth04/... 04-problem Вроде получилось

Сейчас проблема следующая: контроллер Registration, занесённый в setupProxy.js, работает. Если его оттуда убрать - работать перестанет. Также есть контроллер Test, его я в setupProxy.js не заносил и он не работает.

Сообщение от locki131

Proxy error: Could not proxy request /Registration/Index from localhost:3000 to https://localhost:7030/ (ECONNREFUSED)

Эта ошибка появляется в этом проекте:

Сообщение от Igor-san

Там я ничего не трогал кроме порта, если есть желание глянуть, вот моя демка что работает (у меня по крайней мере). https://disk.yandex.ru/d/sRKhB5Xs9p5VbQ

@IamRain · 27.01.2023, 20:25

Пустой App:

JavaScript
1
2
3
4
5
6
7
8
9
const App = () => {
    return (
        <div>
 
        </div>
    );
};
 
export default App;

@locki131 · 27.01.2023, 20:27 **[ТС]**

Да, я его выпилил. Запросы кидал через postman, поэтому даже не стал заполнять этот App.

@IamRain · 27.01.2023, 20:27

Index.js:

@locki131 · 27.01.2023, 20:30 **[ТС]**

Да, он рендерит обычный div.
Не помню, зачем удалил всё оттуда, но к проблеме это отношения не имеет, по идее

Новые блоги и статьи Все статьи Все блоги /
Кредитный калькулятор Maks 05.08.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .	У нас сейчас поговорку "Опять 25" нужно переделать на "Опять +35". kumehtar 04.08.2026 С ностальгией вспоминаю времена моего детства, когда у нас и правда +25 - была максимальная температура летом. Раньше +25 °C реально казались вершиной жары, когда можно было весь день пропадать на. . .	Как ИИ начал спорить и врать (возможно почуяв опасность для себя от индустрии - уход от электроники). Hrethgir 04.08.2026 Недельный диалог, на фоне событий с НПЗ. Да, из спирта можно получать бензин, и это не сложно. Но потом в схеме я решил избавиться от насоса, при этом полностью сделав контроль подачи спирта в. . .	Термопринтер QR701 Argus19 03.08.2026 Термопринтер QR701 Купил два термопринтера QR701. На сэлф-тесте написано: Language: PC936 (GB18030). Что означает, что принтеры могут печатать только латиницу и китайские иероглифы. Так же. . .
Создание формы заимствованного документа Maks 03.08.2026 Задача: Необходимо создать собственную форму заимствованного документа. На форме должен быть реквизит "Покупатель", а также табличная часть со следующими реквизитами: - Расчетный счет покупателя. . .	Задача предоставления скидок покупателям Maks 03.08.2026 Задача: В документе "Продажи" необходимо реализовать функционал предоставления скидок покупателям. Скидка должна автоматически рассчитываться и подставляться в соответствующее поле при выборе. . .	Почему SEO не начинается с ключевых слов: что проверить до написания текстов Neotwalker 01.08.2026 Когда владельцу сайта предлагают заняться SEO, первым шагом часто становится сбор запросов и написание текстов. Логика кажется понятной: 1. Находим ключевые слова. 2. Добавляем их на. . .	Знание — сила: Доктрина интенциональности знаний, углубление в формулу Hrethgir 01.08.2026 https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11957&stc=1&d=1785567302 Знаменитый афоризм Фрэнсиса Бэкона «Знание — сила» (Scientia potentia est) в массовой культуре принято понимать. . .

@locki131 0 / 0 / 0 Регистрация: 10.12.2022 Сообщений: 31
	25.01.2023, 20:49 [ТС]
	Igor-san, сам по себе контроллер не заработал. А вот на счёт портов и прокси интересно, можно немного подробнее? В package.json портов не вижу. Пробовал в setupProxy.js ставить в target адрес, взятый из launchSettings (https://learn.microsoft.com/ru... ew=vs-2022), но это ничего не изменило. 0

@IamRain 4694 / 2702 / 734 Регистрация: 02.08.2011 Сообщений: 7,236
	27.01.2023, 18:32
	locki131, вы не можете сравнить адреса, куда отправляются ваши запросы? Это просто как взять две пилюли, одна - в правую руку, другая - в левую. И посмотреть одинаковые они по цвету или нет. Прокси нужен для локальной разработки фронта, не более того, насколько я помню. Подключаете бэк - прокси нафиг не нужен. Задавались вопросом - что такое есть прокси вообще? Добавлено через 1 минуту PS: Не уверен на самом деле, какую роль в реакте прокси выполняет. Обычно на фронте Webpack Development Server работает, насколько я помню. 0

@IamRain 4694 / 2702 / 734 Регистрация: 02.08.2011 Сообщений: 7,236
	27.01.2023, 19:44
	Add local hosted repo to Github using git 1

@locki131 0 / 0 / 0 Регистрация: 10.12.2022 Сообщений: 31
	27.01.2023, 20:27 [ТС]
	Да, я его выпилил. Запросы кидал через postman, поэтому даже не стал заполнять этот App. 0

@IamRain 4694 / 2702 / 734 Регистрация: 02.08.2011 Сообщений: 7,236
	27.01.2023, 20:27
	Index.js: Миниатюры 0

@locki131 0 / 0 / 0 Регистрация: 10.12.2022 Сообщений: 31
	27.01.2023, 20:30 [ТС]
	Да, он рендерит обычный div. Не помню, зачем удалил всё оттуда, но к проблеме это отношения не имеет, по идее 0