× React - fetch('/') 不会命中 Express.router 中的索引路由

Question

我使用过 Express，但对 React 还很陌生。我已经将 React 连接到一个可以工作的 Express 服务器，但在进入fetch('/')我的主要 React App 组件以命中 Express 应用程序中的索引路由时遇到问题。例如我在 Express 中有这些路线：

app.use('/', routes);
app.use('/users', users);

Express 中的两条路线相同。他们对 MongoDB 进行了简单的调用，响应是res.json(data)。此外，当我在 Express 端口上纯粹测试这些路由时，它们都工作正常。

下面是我的 React 组件。问题是当我尝试使用Express 中的fetch('/')相应内容时app.use('/', routes);它不起作用。如果我把它改成fetch('/users')它就可以了。

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

class App extends Component {
  state = {users: []}

  componentDidMount() {
    fetch('/') // this route doesn't work with Express!
      .then(res => res.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return (
      <div className="App">
        <h1>Users</h1>
        {this.state.users.map(user =>
          <div key={user.id}>{user.username}</div>
        )}
      </div>
    );
  }
}

export default App;

当然，我可以将索引路线名称更改为或其他名称，但如果可能的话，('/index')我希望将其保留为 Express 应用程序中的路线。('/')

如果有人能指出我做错了什么或我可以尝试的事情，我将不胜感激。提前致谢！

Answer 1

当您的前端应用程序由 提供服务http://localhost:3000并且您的后端数据 API 由 提供服务时http://localhost:3001，执行 afetch('/')将在 处请求数据http://localhost:3000。

'proxy'在前端设置参数不会package.json改变这一点。例如，此参数用于运行传出请求的节点应用程序，而不是用于 React 应用程序。

因此，要从前端检索后端数据，您必须执行fetch('http://localhost:3001/'). 如果您想避免重复并为生产做好准备，您可以在单独的文件中定义 API 基本 URI，即config.js位于客户端源树根部的文件：

// general config goes here
const configGlob = {};
// production specific config goes here
const configProd = {
  API_URI: "http://www.example.com/api/v2"
};
// development specific config goes here
const configDev = {
  API_URI: "http://localhost:3001"
};

// merged config
const config = { ...configGlob, process.env.NODE_ENV === 'production' ? ...configProd : ...configDev };
export default config;

然后在你的App.js：

import config from './config';
...
fetch(`${config.API_URI}/`)
...