Мобильная версияЯ запускаю приложение реагирования на порту 3000 и экспресс-сервер на порту 4000 на одном и том же локальном компьютере.
В моем приложении реагирования, используя fetch API, я отправляю данные своей регистрационной формы на свой экспресс-сервер по маршруту «/register» -
const response = await fetch('/register', { метод: 'POST', заголовки : { «Тип контента»: «приложение/json» }, тело: JSON.stringify({ имя: имя пользователя, электронная почта: usermail, телефон: телефон пользователя, работа: работа пользователя, пароль: пароль пользователя, cпароль: пароль пользователя }) }); константные данные = ждут ответа.json(); if(data.status === 422 || !data){ window.alert("Неверная регистрация"); console.log("Неверная регистрация"); }еще{ window.alert("Регистрация прошла успешно"); console.log("Регистрация прошла успешно"); //используем хук useHistory история.push('/логин'); } } И на моем экспресс-сервере я выполняю метод post по маршруту '/register' и сохраняю данные формы в своей базе данных -
router.post('/register' , (req,res)=>{ const {имя, адрес электронной почты, телефон, работа, пароль, cpassword} = req.body; //мы проверяем, пусты ли какие-либо входные данные или нет if(!имя || !электронная почта || !телефон || !работа || !пароль || !cпароль){ return res.status(422).send('Пожалуйста, заполните все поля'); } //мы наблюдаем, зарегистрирован ли пользователь уже или нет, проверяя его электронную почту User.findOne({электронная почта: электронная почта}) .then((userExist) =>{ если (пользовательExist) { return res.status(422).send('Электронная почта уже существует'); }иначе если(пароль!== cпароль){ return res.status(422).send('Пароли не совпадают'); } //если адрес электронной почты не существует, это означает, что пользователь новый, и мы сохраним его данные в БД константный пользователь = новый пользователь({ имя: имя, электронная почта: электронная почта, телефон: телефон, работа Работа, пароль: пароль, cпароль: cпароль, }); //сохраняем сохраненные данные в БД пользователь.сохранить() .then(()=>{ res.status(201).send('Пользователь успешно зарегистрирован') }) .catch((ошибка)=>{ res.status(500).send(ошибка); }) }).catch((err)=>{ console.log(ошибка); }) }) В файле package.json для моего приложения реагирования я добавил прокси-сервер на localhost:4000(экспресс-сервер, определенный на порту 4000) -
{ "имя": "интерфейс", "версия": "0.1.0", «частное»: правда, "прокси": "http://localhost:4000", "зависимости": { "@testing-library/jest-dom": "^5.11.10", "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^12.8.3", "bootstrap": "^5.0.0-beta3", "реагировать": "^17.0.2", "react-dom": "^17.0.2", "реагировать-маршрутизатор-dom": "^5.2.0", "реагировать-скрипты": "4.0.3", "web-vitals": "^1.1.1" }, "скрипты": { "start": "запуск скриптов реагирования", "build": "сборка реагирующих скриптов", "test": "тест реагирования-скриптов", "eject": "извлечь реагирующие скрипты" }, "эслинтконфиг": { "расширяется": [ "реагировать-приложение", "реагировать-приложение/шутка" ] }, "список браузеров": { "производство": [ ">0,2%", "не мертв", "не все op_mini" ], "разработка": [ "последняя версия Chrome", "последняя версия Firefox", "последняя версия сафари" ] } } И в моей консоли Firefox я столкнулся с этой ошибкой -
И в браузере на вкладке «Сеть» я получаю это -
Я столкнулся с ошибкой статуса 422. Я пытался решить эту проблему в течение последних 5 часов, но после прочтения многих решений и статьи, я не могу решить эту мою проблему. Я также проверил подобные вопросы на stackoverflow, но решение для них не сработало. По сути, я пытаюсь отправить данные своей регистрационной формы из моего приложения реагирования на мой экспресс-сервер, определив прокси в файле package.json(приложения реакции), но я не знаю, почему реакция все еще рассматривает собственный порт 3000 вместо порта сервера 4000. Пожалуйста, помогите мне решить эту проблему. Большое спасибо.
