Я в основном java разработчик и имею минимальный node.js опыт. Я разработал java весеннее приложение и решил, что мне нужен минимальный внешний интерфейс для него, который я сделал в React, созданном с помощью приложения Create React. У меня были проблемы с его развертыванием и запуском в AWS с определенными ограничениями портов, поэтому мне было рекомендовано использовать frontend-maven-plugin, чтобы упаковать все это в jar и запустить оттуда. Я сделал это успешно, по крайней мере локально.
Однако теперь я хочу go вернуться в режим разработки и добавить больше функций, похоже, что-то блокирует ответ сервера от возврата к внешний интерфейс. Когда я говорю «режим разработки», я имею в виду, что я вернулся к использованию «npm start» с локальным клиентом реакции, работающим через порт 3000, и записью в пакете. json, чтобы прокси-сервер указывал на мою локальную работу апи. Я убедился, что запрос со страницы React поступает на сервер, но затем ответ никогда не возвращается клиенту. Я посмотрел на сетевой трафик c в Chrome разработчику и все, что он говорит, - «Не удалось загрузить данные ответа».
Когда я делаю запрос к той же конечной точке API, в браузере для Например, ответ возвращается нормально. Ответ прост json.
Я использую fetch в компонентах React для вызова API бэкэнда. Пример ниже.
Я предполагаю, что узел или NPM установили что-то, когда я запускал его через maven и frontend-maven-plugin, что влияет на это. NPM является для меня гигантским черным ящиком, поэтому я не уверен, как еще можно диагностировать это или посмотреть, что блокирует ответ на страницу реакции.
структура проекта выглядит следующим образом:
/root-app-repo-name
/app - the React app; unfortunately named when created with Create React App
/build
/node
/node_modules
/node_modules
/public
/src
/src - java source
/target
maven build output jar is here
pom.mxml
Почему есть 2 папки node_modules?
Пример API вызова компонента React с выборкой:
import React, { Component } from 'react';
import { Button, Container, Table } from 'reactstrap';
class Account extends Component {
constructor(props) {
super(props);
this.state = {account: {}, isLoading: true};
}
componentDidMount() {
this.setState({isLoading: true});
fetch(process.env.API_URL+'/api/account')
.then(response => response.json())
.then(data => this.setState({account: data, isLoading: false}));
}
render() {
const {account, isLoading} = this.state;
if (isLoading) {
return <p>Loading...</p>;
}
return (
<div>
<Container fluid>
Account Num : {account.accountNum}
</Container>
</div>
);
}
}
export default Account;