使用 React 的代理设置从 Featherjs 后端获取数据

Question

我可能完全误解了这一点，但我正在尝试获取 Featherjs 后端服务，运行本地 (localhost:3030/forms) 可从 create-react-app 客户端访问 (本地主机: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;

当我在浏览器中点击 localhost:3030/forms url 时，我得到了我期待的 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，我有多蠢？或者，我应该怎么做才能让它工作？

Answer 1

当您的请求路径中存在 /api 时，将使用 proxy 字段中的 URL。所以 /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/' }));
};

使用 React 的代理设置从 Featherjs 后端获取数据

Using the proxy setting for React to get data from a Featherjs backend

javascript

proxy

reactjs

feathersjs