×React - フェッチ（ '/'）はExpress.routerのインデックスルートにヒットしません

Question

私はExpressでちょっとした作業をしましたが、Reactには新しいことがあります。 Reactはすでに動作しているExpressサーバに接続していますが、私のExpress Appコンポーネントのfetch('/')をExpressアプリケーションのインデックスルートに当てるのに問題があります。たとえば、私はExpressでこれらのルートを持っています：

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

両方のルートはExpressで同じです。彼らはMongoDBへの簡単な呼び出しを行い、応答はres.json(data)です。また、エクスプレスポートでこれらのルートを純粋にテストすると、両方とも正常に動作します。

以下は私のReactコンポーネントです。問題は、fetch('/')を使用してExpressに対応する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:3000でデータを要求しますfetch('/')をやって、http://localhost:3001から提供しました。

フロントエンドに'proxy'パラメータが設定されている場合、それは変更されません。このパラメータは、例えば、Reactアプリではなく、発信リクエストを実行するノードアプリで使用されます。

フロントエンドからバックエンドデータを取得するには、fetch('http://localhost:3001/')を実行する必要があります。あなたの中

// 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; 

そして：あなたが繰り返しを避けるために、生産の準備をしたい場合は、つまり、あなたのクライアントのソースツリーのルートに配置config.jsファイル、別のファイルにあなたのAPIベースURIを定義することができますApp.js：