Как исправить неправильное перенаправление прокси из подпуть от React.js с помощью React Router? - PullRequest
0 голосов
/ 29 апреля 2019

Я создаю многостраничное приложение с React Router и использую Node для бэкэнда.Узел работает на порте 3000, а React на порте 3001. Я настроил прокси в package.json внешнего интерфейса (React).Мой API доступен на localhost: 3000 / api / Так что мои get или post из внешнего интерфейса (порт: 3001) с axios выглядят так:

axios.post('api/login/',{data........})

Он отлично работает по родительскому пути, как / itemили / пример http://localhost:3001/xxxxxx/ ... Я могу получить доступ к своему / api / логину через порт 3000.

Но из подпути, как http://localhost:3001/another/ex/ или http://localhost:3001/xxxxxx/example/ ..В консоли я вижу, что запрос get или post отправляется на http://localhost:3001/xxxxxx/example/api/login. В этих случаях прокси-сервер не перенаправляет должным образом.

Я нашел решение, чтобы избежать подпути, но я бы хотелхотел бы знать, что именно происходит, и каковы решения?

Заранее спасибо за вашу помощь!

<Router history={history}>
<NavBar history={history} refresh={this.state.refresh}/> 
<Switch>
<Route exact path="/" render={(props) => <MainPage history= 
{history} />}/>

<Route exact path="/item" history={history} component= 
{ComponentX1} />

<Route exact path="/example" history={history} component= 
{ComponentX2} />

<Route exact path='/another/ex' history={history} component= 
{ComponentY1}/>

<Route exact path='/xxxxxx/example' history={history} component=    
{ComponentY2}/>

</Switch>
<Footer/>
</Router>

Я хотел бы понять, что происходит.

1 Ответ

0 голосов
/ 30 апреля 2019

Использование должно иметь путь как таковой.

axios.post("/api/login", { ...data }) // Included '/' at the beginning

Кроме того, проверьте, если прокси в package.json как таковой

...
proxy: 'http://localhost:3000' // not '/' at end.
...

Если у вас есть какие-либо сомнения, напишите мне в комментариях.

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