React：添加了 http-proxy-middleware 以从不同的 API 端点获取信息，但现在我有一个 CANNOT /get 错误

问题描述

我阅读了这篇 React-router urls don't work when refreshing or writing manually，虽然它解释了我面临这个问题的原因，但我不太确定这里的最佳方法是什么。

我设置了 http-proxy-middleware 作为从不同服务器提取信息的解决方法。目前，我正在从 firebase 提取信息以获取有关我的用户的信息，以及我的 localhost:8000 服务器以获取其他信息。

但是，在设置 http-proxy-middleware 后，我面临两个问题：

1. 当我在浏览器中输入“localhost:3001/signup”时，我看到一个页面显示Cannot GET /signup
2. 当我输入“localhost:3001/user/username”时，它会显示整个 JSON 响应，而不是允许我使用数据来呈现我的组件。 （下图）

   

这是我的setUpProxy.js

module.exports = function(app){
    app.use(createProxyMiddleware('/api',{ target : 'http://localhost:8000',changeOrigin: true}));
    app.use(createProxyMiddleware('/user',{ target : 'https://us-central1-auth-development-2fa3c.cloudfunctions.net/api',changeOrigin: true}))
    app.use(createProxyMiddleware('/users',changeOrigin: true}))
    app.use(createProxyMiddleware('/scream',changeOrigin: true}))
    app.use(createProxyMiddleware('/screams',changeOrigin: true}))
    app.use(createProxyMiddleware('/login',changeOrigin: true}))
    app.use(createProxyMiddleware('/signup',changeOrigin: true}))

}

这是我的 App.js 路由器设置

  return (
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
        <Router>
          <Switch>
          <QuickstartProvider>
            <Route exact path="/" component={home} />
            <AuthRoute exact path="/frontpage" component={frontpage} />
            <AuthRoute exact path="/login" component={login} />
            <AuthRoute exact path="/signup" component={signup} />
            <Route exact path="/users/:handle" component={user} />
            </QuickstartProvider>
          </Switch>
        </Router>
      </Provider>
    </MuiThemeProvider>
  );
}

export default App;

如果这有帮助，这是我的 /user/username 页面的代码。虽然我认为问题不在这里。

class user extends Component {
  state = {
    profile: null,};
  componentDidMount() {
    const handle = this.props.match.params.handle;
    this.props.getUserData(handle);
    axios
      .get(`/user/${handle}`)
      .then((res) => {
        this.setState({
          profile: res.data.user,});
      })
      .catch((err) => console.log(err));
  }
  render() {
    const { screams,loading } = this.props.data;

    const screamsMarkup = loading ? (
      <p> loading data... </p>
    ) : screams === null ? (
      <p>No posts from this user</p>
    ) : (
      screams.map((scream) => <Scream key={scream.screamId} scream={scream} />)
    );
    return (
      <div>
        {this.state.profile === null ? (
          <p>Loading Profile...</p>
        ) : (
          <StaticProfile profile={this.state.profile} />
        )}
        {screamsMarkup}
      </div>
    );
  }
}

user.propTypes = {
  getUserData: PropTypes.func.isrequired,data: PropTypes.object.isrequired,};

const mapStatetoProps = (state) => ({
  data: state.data,});

export default connect(mapStatetoProps,{ getUserData })(user);

我对反应很陌生，这是我第一次使用 http-proxy-middleware，如果我没有尽可能最好地解释我的问题，我深表歉意。

先谢谢你！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）