React-Router с выборкой 404 (не найден) - PullRequest
1 голос
/ 31 января 2020

Я пишу программу, которая использует весеннюю загрузку (с maven) и базу данных PostgreSQL в бэкэнде, и реагирует js во внешнем интерфейсе.

Изначально у меня был тестовый файл. js, представляющий одну веб-страницу, которая создала запрос на выборку для связи с внутренним контроллером, который, в свою очередь, обновил базу данных. Это сработало, поэтому я хотел сделать еще один шаг, используя реактив-маршрутизатор, чтобы связать более одной страницы во внешнем интерфейсе. Однако, когда я попытался внедрить реактивный маршрутизатор, он вызвал мои первоначальные запросы на получение 404 (Не найдено).

Вот пример одного из запросов на выборку в моем новом тесте. js файл.

const line = {
    name: this.state.name,
    id: this.state.id
};
const fetchOptions = {
    method: 'POST',
    headers: {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json',
        'Access-Control-Allow-Origin' : '*'
    },
    body : JSON.stringify(line)
};

let url = "/create";
console.log("creating");
fetch(url, fetchOptions)
    .then(response => response.json())
    .then(message => {
         this.setState({message: message.text})
    })
    .catch((error) => {
         console.log("error: ", error.message);
    }) 

Это мой основной код. js, который реализует реагирующий маршрутизатор:

import React, { Component } from "react";
import {
  Route,
  NavLink,
  Switch,
  HashRouter
} from "react-router-dom";
import Home from "./Home";
import Test from "./Test";

class Main extends Component {

  render() {
    return (
      <HashRouter>
        <div>
          <h1>Simple SPA</h1>
          <ul className="header">
            <li><NavLink to="/">Home</NavLink></li>
            <li><NavLink to="/Test">Test</NavLink></li>

          </ul>
          <Switch className="content">
            <Route exact path="/" component={Home}/>
            <Route path="/Test" component={Test}/>
          </Switch>
        </div>
      </HashRouter>
    );
  }
}

export default Main;

В заключение рассмотрим, как контроллер получает запрос:

@PostMapping("/create")
@ResponseBody
public ResponseTransfer createTransfer(@RequestBody String student) {
    // Code to update database
    ...
    return new ResponseTransfer(student);
}

Повторюсь: основная идея c заключается в том, что есть Домашняя страница и Тестовая страница, связанные через реакции-маршрутизатор. Тестовая страница имеет текстовое поле и кнопку, которая позволяет пользователю «создать» запись в базе данных. Проблема заключается в том, что когда пользователь нажимает «создать», в файле «Test. js» делается запрос на выборку «/ create». Однако он не достигает @PostMapping ("/ create") в бэкэнд-контроллере, а просто получает 404 (не найдено). Любая помощь будет оценена. Спасибо!

1 Ответ

1 голос
/ 04 февраля 2020

Как выяснилось в комментариях.

При запуске приложения реакции, независимо от использования, скажем, npm start или yarn start, оно будет запускаться по умолчанию с использованием узла и обслуживать приложение на локальном хосте: 3000.

Приложение весенней загрузки будет запускаться по умолчанию с использованием localhost: 8080.

Внешний интерфейс (приложение реагирования) также по умолчанию предполагает, что хост всех остальных вызовов совпадает с запущенным приложением ( локальный: 3000). Так что, если вы сделаете вызов rest, чтобы сказать «/ create», то в конечном итоге это будет сделано против localhost:3000/create, и это будет 404, так как мы даже не касаемся службы весенней загрузки, мы попадаем на сервер узла, который такой конечной точки не существует.

Есть несколько способов ее решения. Один из способов состоит в том, чтобы обслуживать приложение activ из приложения весенней загрузки, при этом приложение реагирует на то же имя хоста, что и служба весенней загрузки.

Еще одно быстрое решение - добавить "proxy": "http://localhost:8080" в ваш пакет. json для передачи всех запросов на правильное имя хоста.

Подробнее о прокси * можно прочитать здесь

Несколько разных способов, в зависимости от того, как вы хотите его решить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...