Использование настройки прокси для React для получения данных из серверной части Featherjs - PullRequest
Новая
       10

Использование настройки прокси для React для получения данных из серверной части Featherjs

0 голосов
/ 26 февраля 2019

Я, вероятно, неправильно понял это, но я пытаюсь получить бэкэнд-сервис Featherjs, работающий локально (localhost: 3030 / forms), доступ к которому осуществляется из клиента create-реагировать-app (localhost: 3000).

Я установил файл package.json на клиенте, чтобы он включал: 

{
  ...
  "proxy": "http://localhost:3030",
  ...
}

... и App.js теперь выглядит так: 

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  state = { forms: [] };

  componentDidMount() {
    fetch("/forms")
      .then(res => res.json())
      .then(forms => this.setState({ forms }));
  }

  render() {
    return (
      <div className="App">
        <h1>Forms</h1>
        {this.state.forms.data.map(myForm => (
          <div key={myForm._id}>{myForm.package_id}</div>
        ))}
      </div>
    );
  }
}

export default App;

Когда я нажимаю URL-адрес localhost:3030/forms в браузере, я получаю ожидаемый JSON: 

{
  total: 1,
  limit: 10,
  skip: 0,
  data: [
    {
      columns: "8",
      datarows: [
        {
          age: 49,
          childcount: 1,
          firstname: "Darius",
          gender: "m",
          group: 1,
          insideLegMeasurement: 144,
          lastname: "Holder"
        }
      ],
      package_id: "1234",
      rows: "2",
      _id: "k6M3zRoDfZ0EKWBw"
    }
  ]
}

Кажется, я не получаю ошибки CORS, но запрос прокси не кажетсябыть пропущенным.Вместо этого я получаю сообщение об ошибке «TypeError: Cannot read property 'map' of undefined» ... :-(

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

1 Ответ

0 голосов
/ 26 февраля 2019

URL-адрес в поле proxy будет использоваться, если в пути запроса присутствует /api.Таким образом, /forms не будет работать, но, например, /api/forms будет проксироваться до http://localhost:3030/api/forms.

. Если вы используете react-scripts@2.0.0 или выше, вы можете добавить файл src/setupProxy.js и настроить прокси для вашегоhttp-proxy-middleware.

Вот как вы бы сделали так, чтобы ваш запрос /forms был отправлен на http://localhost:3030: 

// src/setupProxy.js
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/forms', { target: 'http://localhost:3030/' }));
};
...